JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>List item number one has some text to go along with it.</li>
    <li>List item number two has some text to go along with it as well.</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
    <li>List item number three has some text to go along with it too, what did you expect?</li>
</ol>

CSS

ol {
    display: block;
    padding: 0 0 0 26px;
    list-style: none;
    background: #ccc;
    overflow: hidden;
    counter-reset: numList;
}
ol li {
    width: 176px;
    margin-right: 44px;
    float: left;
    position: relative
}
ol li:before {
    counter-increment: numList;
    content: counter(numList);
    
    float: left;
    position: absolute;
    left: -26px;
    
    font: bold 12px sans-serif;
    text-align: center;
    color: #fff;
    line-height: 18px;
    
    width: 18px; height: 18px;
    background: #f0f;
    
    -moz-border-radius: 999px;
    border-radius: 999px
}