JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/><br/><br/><br/>more rows please...<br/><br/><br/><br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/><br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

CSS

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

JavaScript

$(document).ready(function() {
   
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);
        
});