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: item1;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counter(item1)".";
    counter-increment: item1;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

ol ol {
    counter-reset: item2;
}
ol ol li:before {
    content: counter(item1)"."counter(item2)".";
    counter-increment: item2;
}
ol ol ol {
    counter-reset: item3;
}
ol ol ol li:before {
    content: counter(item1)"."counter(item2)"."counter(item3)".";
    counter-increment: item3;
}
ol ol ol ol {
    counter-reset: item4;
}
ol ol ol ol li:before {
    content: counter(item1)"."counter(item2)"."counter(item3)"."counter(item4)".";
    counter-increment: item4;
}