JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>lorem</li>
  <li>lorem ipsum</li>
</ol>

<div>
  <ol>
    <li>lorem (should be 1.)</li>
    <li>lorem ipsum ( hould be 2.)</li>
  </ol>
</div>

CSS

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}