JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
</ol>

<ol>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
</ol>

CSS

ol {
    margin: 0 0 1em 0;  
    counter-reset: item; 
}

ol li {
    list-style: decimal inside none;
    background: pink;
    display:inline-block;
    border-bottom: 3px dotted #000;       
    margin-left: 1em;
}

ol li div {
    background: #999;
    width: 20em;
    height: 2em;
    margin: 0.2em; 
}


li:before {
    display: inline-block;
    content: counter(item);
    counter-increment: item;    
    width: 2em;
    margin-left: -1em;
}