JSFiddle - React, Tailwind, and code Playground
HTML
<div class="holder" >
<!-- LEFT-HAND BOX -->
<div id="left-box" class="half left">
<div class="info-box">
<h2>Left-hand Content</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<!-- RIGHT-HAND BOX -->
<div id="right-box" class="half right" >
<div class="info-box">
<h2>Right-hand Content</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- END RIGHT and LEFT BOXES -->
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
CSS
.holder {
border:red dotted 1px;
margin-top:25px;
}
.half{
width:50%;
}
.left{
float:left;
}
.right{
float:right;
}
.info-box {
background-color:#cfcfcf;
margin: 10px;
padding: 10px;
}
.info-box h2 {font-weight:bold;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
JavaScript
$(function() {
var new_height = $('#left-box').closest('.holder').height() -25;
// alert(new_height);
$('#right-box').find('.info-box').height(new_height);
$('#left-box').find('.info-box').height(new_height);
});