Best way of styling CSS - html

Question

I'm using css grid and in this case i have made a div that fit in a grid (the green box)(at the right the color is green not yellow) and inside this div i have made another grid (2 columns) and in one at the left there is the image and at the right there is another div (the red one) with a paragraph.
As you can see i have used and height of 61vh otherwise the image doesn't fit well and than i had to set also an height for the red box otherwise it goes outside of the green box.
I think this is not ther right way of doing it, how can i do it without setting an exact height?
.GreenBox{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 6/7;
width: 100%;
height: 61vh;
display: grid;
margin-left: -200px;
margin-right: -10px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
border: 2px solid greenyellow;
}
.RedBox{
grid-column: 2;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
border: 1px solid red;
height: 60.6vh;
padding-left: 10px;
}
.PurpleBox{
grid-row: 2;
border: 1px solid blueviolet;
}
.Image{
width: 100%;
height: auto ;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
<div className="GreenBox">
<img className="Image" src={foto2}/>
<div className="RedBox">
<p className="Paragraph">ILorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tellus eget velit cursus feugiat. Proin quis condimentum velit, a pellentesque erat. Maecenas consectetur eros et nibh condimentum pharetra. </p>
</div>
</div>
PS: the problem is that if that if i resize the page there is always a bottom gap, i would like to remove that and fit well the content in the greenbox.