JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <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;
}

JavaScript

function calculateLIsInRow() {
    var lisInRow = 0;
    $('ul li').each(function() {
        $(this).removeClass("back");
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) 
                {
               $(this).prev().addClass("back");
                    //return false;
                }
            
            lisInRow++;
        }
        
        else {
           
            lisInRow++;   
        }
        if($(this).next().length > 0) {
                   }
        else{ $(this).addClass("back");
}
    });
    
    $('.result').html('No: of lis in a row = ' + lisInRow);
}

calculateLIsInRow();

$(window).resize(calculateLIsInRow);