Div is not resizing properly to be the height of its parent - html

Question

I'm trying to get the red border that contains the text to stretch to the bottom of the parent div. Height 100% won't do it. It essentially needs to be the same height as the image.
Note: when viewing the demo, it might be worth shrinking your browser window.
How can I get this to size properly when the 3:2 image is setting the height?
Many thanks for any help!
.the-window {
width: 100%;
height: auto;
display: block;
float: left;
}
.the-image img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.the-image {
float: left;
background-size: cover !important;
width: 45%;
background-position: center center !important;
display: block;
background: pink;
box-sizing: border-box;
border: 1px solid #ccc;
border-right: none;
}
.the-details {
display: block;
float: left;
width: 55%;
height: 80px;
box-sizing: border-box;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.the-header {
padding: 0;
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-image" style="background:url('#')">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
</div>
</a>
<div class="the-details">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>

Answer 1

You can do it with the Flexbox:
/* commented out the unnecessary styles */
* {box-sizing:border-box} /* use * {box-sizing:border-box;margin:0;padding:0} to keep the same height of both all the way up when resized vertically */
html, body {margin:0}
.the-window {
/*width: 100%;*/
/*height: auto;*/
/*float: left;*/
display: flex; /* displays flex-items (children) inline, where flex-items have the same height by default, which is dictated by the height of the "tallest" one / can also use the display: inline-flex if you only want it to take the contents width */
}
.the-image img {
display: block;
max-width: 100%; /* modified */
max-height: 100vh; /* vertically responsive */
margin: 0;
}
.the-image {
/*float: left;*/
background-size: cover !important;
/*width: 45%;*/
background-position: center center !important;
/*display: block;*/
background: pink;
border: 1px solid #ccc;
border-right: none;
}
.the-details {
/*flex: 1; uncomment if you want it to take the remaining horizontal space*/
/*display: block;*/
/*float: left;*/
/*width: 55%;*/
/*height: 80px;*/
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.the-header {
padding: 0;
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-image" style="background:url('#')">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
</div>
</a>
<div class="the-details">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>

Answer 2

One way is to use flexbox, as already shown in another answer. Another way is to put the image inside the "details" container (which has 100% width, or any desired width), float the image to the left and add height: auto and overflow: auto to its container to make it wrap the complete height of the image.
I erased the unnecessary CSS in the following snippet and added a margin-right to the image to create some distance to the text:
.the-details {
width: 100%;
height: auto;
box-sizing: border-box;
border: 1px solid red;
overflow: auto;
}
.the-details img {
float: left;
margin-right: 20px;
}
.the-header {
font-size: 14px;
color: #333;
}
<div class="the-window">
<a href="#">
<div class="the-details">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
<h4 class="the-header">Some text will be going in here</h4>
</div>
</div>

Answer 3

try to remove the height from .the-details then add display:flex; align-items:stretch; to the style of .the-window and give .the-image width:100%