JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="columnWrap">
    <div class="columns">Lorem <br/> Ipsum <br/> Ipsum <br/> Ipsum <br/> Ipsum <br/> Ipsum </div>
    <div class="columns">Lorem <br/> Ipsum</div>
    <div class="columns">Lorem <br/> Ipsum <br/> Dolor</div>
    <div class="columns">Lorem <br/> Ipsum <br/> Dolor <br/> Sit</div>
    <div class="columns">Lorem <br/> Ipsum <br/> Dolor <br/> Sit <br/> AmetASDASD</div>
</div>

<div class="columnWrap">
    <div class="columns">Lorem</div>
    <div class="columns">Lorem <br/> Ipsum</div>
</div>

CSS

.columnWrap { 
    margin: 5px; 
    float: left; 
    clear: both; 
    background: #e1e1e1;
}

.columns { 
    float: left; 
}

.even { background: #7777; }

JavaScript

$(document).ready(function() {
    equalHeight($(".columns"));
});

function equalHeight(group) {
    
    var tallest = 0;
    
    group.each(function() {
        
        var thisHeight = $(this).height();
        
        if( thisHeight > tallest ) {
            tallest = thisHeight;
        }
        
        $(':even', this).addClass('.even');
        
    });
    
    group.height(tallest);
    
}