Make an image resize depending on content inside a div - html

Question

I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.
Here is a codepen.
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>
#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
Any help would be highly appreciated, thanks in advance.

Answer 1

In the snippet below, if the image is there, I am assigning its height dynamically using jQuery height by calculating the remaining space inside the #parent. (200 - height). So whatever the content may be, the height of the image will increase or reduce based on that.
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})
#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>