JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="col a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, ex, expedita, tempora, sit explicabo consectetur eveniet reiciendis odit dignissimos numquam dolores totam id ab veniam iste iure molestiae rerum quibusdam.</div>

CSS

.a { background: red; }
.b { background: blue; }
.c { background: green; }

.col {
    float: left;
    width: 33%;
}

JavaScript

$(document).ready(function() {
    setHeight('.col');
});


function setHeight(column) {
    var maxHeight = 0;
    //Get all the element with class = col
    column = $(column);
    column.css('height', 'auto');
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    //Set the height
    column.height(maxHeight);
}


$(window).resize(function() {
    setHeight('.col');
});