JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="parent">
    
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt consequatur quidem tempore odio at fugiat unde nulla veniam numquam.
    </div>
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod magni.
    </div>
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sint rerum ipsa eligendi optio ipsum molestiae officia quam ad iure ea sit iusto quasi.
    </div>
    
</div>

CSS

.parent {
    border: 2px solid red;
    float: left;
}

.child {
    float: left;
    width: 33.33333%;
    height: 100%;
    outline: 2px dashed blue;
}

JavaScript

var child = $('.parent .child');

$(window).on("resize", function() {
    child.height('auto');
    resizeColumns();
});

resizeColumns();

function resizeColumns() {
    
  var elementHeights = child.map(function() {
    return $(this).height();
  }).get();

  var maxHeight = Math.max.apply(null, elementHeights);

  child.height(maxHeight);
    
}