CSS Grid: Text outside the div

Question

I have an issue with css grid

<div class="container">
  <div class="q1">
    <h4>Short Text</h2> 
  </div>
  <div class="a1">
    <p>LONG TEXT</p>
  </div>
</div>
 

The LONG TEXT is going outside the div, I would like to keep it inside (it doesn't matter the height of the column). My css is:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    background-color: #ffe8d6;
    filter: brightness(90%);
    padding: 5px;
}

So the idea is having 2 columns of the same width and with the height defined by the LONG TEXT in the second one. Now the text is going outside the container.

Answer 1

I have just copy/pasted your code here and fixed one <h4> tag and one <div> tag. The div problem was that your <div class="container"> had no </div> to match it. The "Short Text" <h4> tag had a closing tag, but it was of the wrong type (h2). It looked like: <h4>Short Text</h2> and I changed it to: <h4>Short Text</h4>.

Additionally, I supplied sample text in each section to show the long and short sections more clearly.

Other than that, the code in this snippet is identical to yours. I didn't do anything to the CSS, but it seems that even with long text and short text, nothing is overflowing the containing div.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: #ffe8d6;
  filter: brightness(90%);
  padding: 5px;
}

<div class="container">
  <div class="q1">
    <h4>Short Text</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
      Fames ac turpis egestas maecenas pharetra
      convallis posuere. Quam nulla porttitor
      massa id neque aliquam vestibulum morbi
      blandit. Ligula ullamcorper malesuada proin
      libero. Donec adipiscing tristique risus nec
      feugiat.
    </p>
  </div>
  <div class="a1">
    <h4>Long Text</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur
      adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua.
      Nec sagittis aliquam malesuada bibendum arcu
      vitae elementum. Tempor nec feugiat nisl
      pretium. Libero justo laoreet sit amet. Ut
      ornare lectus sit amet est. Ipsum dolor sit
      amet consectetur. Et netus et malesuada
      fames ac turpis. Tellus rutrum tellus
      pellentesque eu tincidunt tortor aliquam. Et
      ultrices neque ornare aenean euismod
      elementum. Eu ultrices vitae auctor eu augue
      ut lectus arcu bibendum. Velit sed
      ullamcorper morbi tincidunt ornare.
      Pellentesque habitant morbi tristique
      senectus et netus. Mattis molestie a iaculis
      at erat pellentesque adipiscing commodo
      elit. Sit amet purus gravida quis blandit
      turpis cursus in hac. Eget duis at tellus at
      urna condimentum. Nunc mattis enim ut tellus
      elementum sagittis. Dignissim enim sit amet
      venenatis urna. Mauris cursus mattis
      molestie a iaculis at erat. Malesuada nunc
      vel risus commodo viverra.
    </p>
    <p>
      In metus vulputate eu scelerisque felis
      imperdiet proin fermentum. Tellus id
      interdum velit laoreet id donec. Cras
      adipiscing enim eu turpis egestas. Eget
      nullam non nisi est sit amet facilisis.
      Tristique nulla aliquet enim tortor at
      auctor. Eu non diam phasellus vestibulum
      lorem sed risus. Odio aenean sed adipiscing
      diam donec adipiscing tristique. Fermentum
      et sollicitudin ac orci phasellus egestas.
      Placerat orci nulla pellentesque dignissim
      enim sit amet venenatis urna. Donec pretium
      vulputate sapien nec sagittis aliquam
      malesuada bibendum arcu. Diam vel quam
      elementum pulvinar etiam non quam. Aliquam
      sem et tortor consequat id porta nibh
      venenatis. Hac habitasse platea dictumst
      vestibulum rhoncus est. Amet consectetur
      adipiscing elit pellentesque habitant morbi
      tristique senectus. Urna molestie at
      elementum eu. Donec et odio pellentesque
      diam volutpat commodo. Nibh sed pulvinar
      proin gravida hendrerit lectus a.
    </p>
    <p>
      Amet consectetur adipiscing elit duis
      tristique sollicitudin nibh sit. Risus at
      ultrices mi tempus imperdiet nulla
      malesuada. Et pharetra pharetra massa massa
      ultricies mi. Quam nulla porttitor massa id
      neque aliquam vestibulum. Donec ac odio
      tempor orci dapibus ultrices in iaculis.
      Pharetra vel turpis nunc eget lorem dolor
      sed viverra ipsum. Arcu non sodales neque
      sodales ut. Vitae nunc sed velit dignissim
      sodales ut eu sem integer. Cursus risus at
      ultrices mi tempus imperdiet. Enim neque
      volutpat ac tincidunt vitae semper quis.
      Rhoncus urna neque viverra justo. Mattis
      rhoncus urna neque viverra justo nec
      ultrices.
    </p>
    <p>
      Pellentesque adipiscing commodo elit at
      imperdiet. Donec ac odio tempor orci dapibus
      ultrices in iaculis nunc. Lacus vestibulum
      sed arcu non odio. Elit ullamcorper
      dignissim cras tincidunt. Aliquet sagittis
      id consectetur purus. Nunc sed velit
      dignissim sodales. Amet mattis vulputate
      enim nulla aliquet porttitor lacus luctus.
      Donec enim diam vulputate ut pharetra sit
      amet aliquam. Purus in massa tempor nec
      feugiat nisl pretium. Lacus laoreet non
      curabitur gravida arcu ac tortor dignissim
      convallis. Turpis massa sed elementum tempus
      egestas sed sed risus pretium. Ut enim
      blandit volutpat maecenas volutpat blandit
      aliquam etiam.
    </p>
    <p>
      Fermentum odio eu feugiat pretium nibh ipsum
      consequat nisl. Euismod elementum nisi quis
      eleifend quam adipiscing vitae proin. Id
      neque aliquam vestibulum morbi blandit
      cursus risus at ultrices. Libero nunc
      consequat interdum varius sit amet.
      Facilisis volutpat est velit egestas dui.
      Ornare suspendisse sed nisi lacus sed
      viverra tellus in. Rhoncus est pellentesque
      elit ullamcorper. Eleifend quam adipiscing
      vitae proin sagittis nisl rhoncus mattis
      rhoncus. Pharetra sit amet aliquam id diam
      maecenas ultricies. Tincidunt nunc pulvinar
      sapien et ligula ullamcorper. Sed risus
      ultricies tristique nulla aliquet enim
      tortor at. Erat pellentesque adipiscing
      commodo elit at imperdiet dui accumsan sit.
      Eget nunc scelerisque viverra mauris.
    </p>
  </div>
</div>

Answer 2

You did not close your first div. In the Short Text you opened h4 but closing tag is h2. Fix these typo first. Here is the working code below. I have added q1 and a1 classes to check whether the text is inside the div or not.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: #ffe8d6;
  filter: brightness(90%);
  padding: 5px;
}
.q1 {
  background: gray;
}
.a1 {
  background: darkgray;
}

<div class="container">
  <div class="q1">
    <h4>Short Text</h4> 
  </div>
  <div class="a1">
    <p>LONG TEXT dsfsdfsd sdf sdfsdf sdfs dsdf sdfsdf dsf sdfsdf sdfs dfsdfsdf s</p>
  </div>
</div>