How to make two columns the same height and responsive - html

Question

I am trying to make two bootstrap columns the same height and responsive.
So far I have the two columns the same height but as the screen size gets smaller one columns becomes shorter than the other. Like this:
To make the two columns I used Bootstrap 3.
My HTML:
<div class="col-md-6">
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">BREAKFAST MENU</button>
</div>
</div>
<!--
-->
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">DRINKS MENU</button>
</div>
</div>
</div>
<!--
-->
<div class="col-md-6 hard--right">
<div id="carousel-example" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
<li data-target="#carousel-example" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/1200x1200" alt="" style="max-height: 1020px; width:100%">
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" style="width:100%" alt="Second slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Third slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fourth slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fifth slide" />
</div>
</div>
<div class="main-text hidden-xs">
<div class="text-center">
<button class="btn">MAIN MENU</button>
</div>
</div>
</div>
</div>
The Codepen to my problem is https://codepen.io/mrsalami/pen/dKpdXO

Answer 1

Images have width: 100%, so when screen resizes they reduce their width based on parent's width (50% of screen width size).
This caused the height of the images to resize too, based on their original aspect ratio.
So this will work if:
right image's height = ( left images height * 2 ) + space between.