JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>1679</li>
    <li>1682</li>
    <li>1732</li>
    <li>1761</li>
    <li>1773</li>
    <li>1781</li>
    <li>1788</li>
    <li>1791</li>
    <li>1797</li>
    <li>1799</li>
    <li>1832</li>
    <li>1861</li>
    <li>1873</li>
    <li>1879</li>
    <li>1881</li>
    <li>1882</li>
    <li>1888</li>
    <li>1891</li>
    <li>1897</li>
    <li>1899</li>
    <li>1932</li>
    <li>1932</li>
    <li>1961</li>
    <li>1961</li>
</ul>

CSS

*{margin:0;padding:0;}
ul {
    position:relative;
    height:80px;
    width:350px;
    margin:10px;
    padding:0;
    outline:1px solid;
    overflow:auto;
}
li{
    float:left;
    list-style:none;
    margin:0;
    padding:3px 5px;
}

JavaScript

var list, currentColLeft, currentColTop, nextColWidth;
currentColLeft = currentColTop = nextColWidth = 0;
list = $('ul#list');
$('ul#list > li').each(function(i, el){
    var h, w;
    h = $(el).outerHeight();
    w = $(el).outerWidth();
    if(currentColLeft + w > nextColWidth){
        nextColWidth = currentColLeft + w;
    }
    if(currentColTop + h > list.innerHeight()){
        currentColTop = 0;
        currentColLeft = nextColWidth;
        nextColWidth = 0;
    }
    $(el).css({'float':'none','position':'absolute','top':currentColTop,'left':currentColLeft});
    currentColTop += h;
});