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. List item number two has some text to go along with it as well. 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;
    
    width: 680px
}
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;
}