JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="numerize-lines">
    <li>Lorem ipsum</li>
    <li>dolor sit amet</li>
    <li class="eol">consectetur</li>
    <li>adipisicing elit</li>
    <li>sed do eiusmod</li>
    <li>tempor incididunt</li>
    <li>ut labore</li>
    <li>dolore magna aliqua</li>
</ul>

CSS

ul {
    background-color: #EEE;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
    padding: 1em;
}
ul > li {
    display: inline-block;
    background-color: #CCC;
    margin: 0.25em;
    padding: 0.25em;
}
ul li.line-2 {
    background-color: #FFF;
}

JavaScript

$("ul.numerize-lines").each(function () {
    var list = $(this);
    var currentDistance = 0;
    var currentLine = 0;

    list.find("li").each(function () {
        var item = $(this);
        var offset = .offset();
        var topDistance = offset.top;
        if (topDistance > currentDistance) {
            currentDistance = topDistance;
            currentLine += 1;
        }
        item.addClass("line-" + currentLine);
    });
});