Column with fixed aspect ratio in two column flex layout - html

Question

I need an image (image container to be precise) to resize according to container height and maintain its aspect ratio. Longer the text = bigger the image. Right now its ether image getting out of container or just staying still.
article,
.information,
.image {
margin: 8px;
border: 2px solid black;
}
article {
display: flex;
}
.information {
flex-grow: 1;
}
.image {
font-size: 0;
}
<article>
<div class="information">
<h3>too much text. image must be resized to fill whole height and stay square</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue, turpis in sollicitudin fringilla, sapien augue consectetur augue, id lacinia nibh massa at justo. Praesent pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis.</p>
</div>
<div class="image">
<img src="https://via.placeholder.com/150" />
</div>
</article>
<hr/>
<article>
<div class="information">
<h3>too little text</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="https://via.placeholder.com/150" />
</div>
</article>

Answer 1

article,
.information,
.image {
margin: 8px;
border: 2px solid black;
}
.image{
width:50%;
}
.image img{
height:100%;
width:100%;
}
article {
display: flex;
}
.information {
width:50%;
flex-shrink:0;
}
.image {
font-size: 0;
}
<article>
<div class="information">
<h3>too much text. image must be resized to fill whole height and stay square</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue, turpis in sollicitudin fringilla, sapien augue consectetur augue, id lacinia nibh massa at justo. Praesent pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis
pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis.</p>
</div>
<div class="image">
<img src="https://via.placeholder.com/150" />
</div>
</article>
<hr/>
<article>
<div class="information">
<h3>too little text</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="https://via.placeholder.com/150" />
</div>
</article>