JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<ul class="tm-whatwedo">
    <li style="height:50px;">
        Test 1
    </li>
    <li style="height:10px;">
        Test 2
    </li>
    <li style="height:150px;">
        Test 3
    </li>
</ul>

CSS

.tm-whatwedo li {
    background-color: blue;
    color: white;
    margin: 10px;
}

JavaScript

$("document").ready(function() {
    var heightEqualizing = function () {
        var element = $('.tm-whatwedo li');
        
        var elementHeights = element.map(function () {
            return $(this).height();
        }).get();
        
        var maxHeight = Math.max.apply(null, elementHeights);
        
        element.height(maxHeight);
        console.log(maxHeight);
    };
    $(window).on('resize', function(){
      heightEqualizing();
    });
});