CSS Grid: Text outside the div - html

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

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>

Answer 2

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>