JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ul>

CSS

li {
    display: block;
    float: left;
    list-style:none;
    width: 200px;
    padding: 15px 0;
    background-color: #ccc;
    border: 1px solid #333;
}

li:last-child,
li.lastInRow {
    background-color: red;
}

JavaScript

var wrapDetector = function(element) {
    var $elem = $(element);
    var wrapper = $(element).parent();
    var wrapperWidth = wrapper.outerWidth();
    var expToggle = $('#main-menu-wrapper.main-menu-expanded #header-toggle-buttons');
    wrapper.attr('data-width', wrapperWidth);
    var elemTotalWidth = 0;
    $elem.each(function() {
        elemTotalWidth += $(this).outerWidth();
    });
    
    var wrapperWidthNew = wrapper.outerWidth();
    var curWidth = 0;        
    $elem.removeClass('lastInRow last-row');
    $elem.each(function() {
        var that = $(this);
        var elemWidth = that.outerWidth();
        curWidth += elemWidth;        
        if (curWidth > wrapperWidthNew) {
            that.prev().addClass('lastInRow');
            curWidth = elemWidth;
        }
        that.attr('data-curWidth', curWidth);        
    });
    var lastInRow = $(element + '.lastInRow');
       
    if (lastInRow.length > 0) {
        lastInRow.last().nextAll().addClass('last-row');        
    } else {
        $elem.addClass('last-row');
    }
}

wrapDetector('li');

$(window).resize(function() {
    wrapDetector('li');
});