JSFiddle - React, Tailwind, and code Playground

by upsidown

HTML

<div class="log"></div>
<ul class="container" id="container1">
    <li>Some text</li>
    <li>Some more text</li>
    <li>Some text</li>
    <li>Some even more text</li>
    <li>Some text</li>
</ul>
<ul class="container" id="container2">
    <li>Some other text</li>
    <li>Some other text</li>
    <li>Some text</li>
    <li>Some even more other text</li>
    <li>Some text</li>
</ul>

CSS

ul.container li {
    display: inline-block;
    list-style-type: none;
    background: yellow;
    width: 50px;
    vertical-align: top;
}
.log {
    float: right;
    background: lightblue;
}

JavaScript

function listHeight() {

    $("ul.container").each(function () {

        var listHeight = 0;
        var newHeight = 0;

        $("li", this).each(function () {

            newHeight = $(this).height();

            if (newHeight > listHeight) {

                listHeight = newHeight;
            }
        });

        $("li", this).height(listHeight += 25);
        $(".log").append($(this).attr('id') + ' listHeight: ' + listHeight + '<br />');
    });

    $(".log").append("-------------------------<br />");
}

listHeight();

$(window).resize(function () {
    listHeight();
});