JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li><span>1</span>List item number one has some text to go along with it.</li>
    <li><span>2</span>List item number two has some text to go along with it as well.</li>
    <li><span>3</span>List item number three has some text to go along with it too, what did you expect?</li>
    
    <li><span>4</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>5</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>6</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>7</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>8</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>9</span>List item number three has some text to go along with it too, what did you expect?</li>
    <li><span>10</span>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
}
ol li {
    width: 176px;
    margin-right: 44px;
    float: left;
    position: relative
}
li span {
    float: left;
    position: absolute;
    left: -26px;
    
    font: bold 12px sans-serif;
    text-align: center;
    color: #fff;
    line-height: 18px;
    
    width: 18px; height: 18px;
    background: url('http://dummyimage.com/18x18/f0f/fff&text=+') top left no-repeat;
}