JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="result">
    </span>

CSS

ul li {
    float: left;
    margin: 5px;
    border: 1px solid #888;
    width: 80px;
    height: 30px;
}
.back {
    background:#ccc;
}
.result {
    background-color: #ddd;
    margin-top: 10px;
    float: left;
    clear: both;
    width: 100%;
    padding: 6px;
}

.to-hide{
    color:red
}

JavaScript

var resizeTimer;

function findLastInRow(){
     var $list = $('ul'),
        offsetLeft = $list.offset().left,
        leftMargin = 5;
    resetLastInRow($list);
    
    $list.children().each(function (i) {
        var $li = $(this).text('Item #' + (i + 1));
        var offL = $li.offset().left + leftMargin;        
        if ($li.offset().left === offsetLeft+leftMargin) {
            $li.prev().addClass('to-hide');
        }
    }).last().addClass('to-hide');    
    
}

function resetLastInRow($parent){
    $parent.children().removeClass('to-hide');    
}

$(window).resize(function(){
    if(resizeTimer){
       clearTimeout(resizeTimer); 
    }
    resizeTimer=setTimeout(findLastInRow,50);
    
}).resize();