JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <ul class="list">
        <li><a href="#">111111 111111 1 1 1 1</a></li>
        <li><a href="#">22 2222 2 2 2</a></li>
        <li><a href="#">333 3 3 3 3 33 3 3 33333 3 3 3 3 3 3 3 3 3</a></li>
        <li><a href="#">4444444444 4444444 444 4 4 4444444444 4 44 4 4 44</a></li>
        <li><a href="#">5555 555</a></li>
        <li><a href="#">66 6666  6666  6 6 6 666 66 66 6 6 6 6  6 6 66666 66666 666 6</a></li>
        <li><a href="#">7777 7777777 7777 777777 777</a></li>
    </ul>
</div>

CSS

body{font-size:16px}
			#wrap{max-width:400px;text-align:center;border:2px solid red}
			.list li{display:inline-block;vertical-align:bottom;width:100px;text-align:left;border:1px solid blue;}
			.list li a{display:block;margin:5px;border:1px solid green;}

JavaScript

$(function() {
    var wrap = document.querySelector('.list'),
        list = wrap.getElementsByTagName('li');
    
    function setHeight() {
        var i, j, m,
            l = list.length, n = Math.floor(wrap.clientWidth / list[0].offsetWidth);
        for(i = 0; i < l; i += n) {
            for(j = i, m = 0; j < i + n && j < l; j++) {
               m = Math.max(list[j].clientHeight, m);
            }
            for(j = i; j < i + n && j < l; j++) {
                list[j].style.height = m + 'px';
            }
        }
    };
    
    setHeight();
    window.addEventListener('resize', setHeight);
});