I have a challenge with creating a div container that has a div for an image and a div for text. The height of the parent div is set to match the height of the text div automatically. I don't want to give the container an actual height. My goal is to vertically center the image div within the container and have the image adjust its size when the window size changes, while still remaining in the middle of the container. I've experimented with methods like 'table-cell', 'inline-block', 'vertical-align: middle', and 'position: absolute', but none of them were successful.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div class="container">
<div class="img">
<img src="img.jpg">
</div>
<div class="text">
<h3>Heading</h3>
<p>
Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen.
</p>
<br>
<p>
Strip steak landjaeger ham hock, pig picanha cow beef ribs drumstick prosciutto ball tip chicken cupim tongue salami. Cupim flank kielbasa, strip steak pork buffalo boudin. Turducken meatball sausage short ribs bacon pig venison t-bone hamburger. Strip steak alcatra boudin burgdoggen cupim. Leberkas frankfurter swine prosciutto hamburger ball tip.
</p>
<br>
<p>
Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim.
</p>
</div>
</div>
</body>
*{
box-sizing: border-box;
}
.container{
padding: 0 5vw;
overflow: auto;
}
.img{
width: 25%;
float: left;
}
.img>img{
width: 100%;
}
.text{
width: 75%;
float: left;
padding: 0 0 0 2em;
}