JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
</ul>

<ul>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
    <li>Tag</li>
</ul>

CSS

body {
    counter-reset: ulNum;
}

ul {
    clear: both;
    margin: 1em auto;
    width: 50%;
    border: 1px solid #f90;
    counter-increment: ulNum;
    position: relative;
}

ul:before {
    position: absolute;
    left: -11em;
    top: 0.2em;
    content: "ul:nth-child(" counter(ulNum) "):";
    font-style: italic;
    font-family: mono;
    font-size: 80%;
}

/* the first ul: this demo only tested in Chrome 8/Ubuntu 10.10 */

ul:nth-child(1) li {
    float: left;
    width: 3em;
    border: 1px solid #ccc;
    overflow: hidden;
}

/* the second ul, you could use class or id instead of the :nth-child() pseudo-selector */

ul:nth-child(2) {
    margin-top: 4em;
    white-space: nowrap; /* this is the important part, along with... */
}

ul:nth-child(2) li {
    display: inline-block; /* ...this part, albeit 'display: inline' would work too */
    width: 3em;
    border: 1px solid #ccc;
}

JavaScript

$('ul').each(
    function(){
        $(this).find('li').each(
            function(i){
                $(this).text('Tag ' + (i+1));
            });
    });