JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="item-list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

CSS

.item-list, .new-item-list {
    width: 100px;
}

.item-list li {
    color: red;
    display: inline-block;
    width: 50px;
}

JavaScript

var items = $('.item-list li'),
    rowcount = Math.floor($('.item-list').width() / items.width()), // items per row
    temp = [];

for (var i = 0, j = items.length; i < j; i += rowcount) {
    temp.push(items.slice(i, i + rowcount));
}

// push placeholder <li>s for the last row if it has items < rowcount
var k = temp.length;
while (temp[k - 1].length < rowcount) {
    temp[k - 1].push($('<li class="empty" />'));
}

// reverse rows and iterate temp
while(k--) {
    for(var l = 0, m = temp[k].length; l < m; l++) {
       $('.item-list').append(temp[k][l]); 
    }
}