JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <ol>
        <li class="continuous-list">Life is good</li>
        <li class="continuous-list">
            <p>Life is bad</p>
        </li>
    </ol>
    <ol>
        <li class="continuous-list">Life is good</li>
        <li class="continuous-list">Life is good</li>
    </ol>
</div>

CSS

#test {
    counter-reset: continuous-counter;
}
li.continuous-list {
    list-style-type: none;
    counter-increment: continuous-counter;
}
li.continuous-list:before {
    content:"(" counter(continuous-counter)") ";
}

ol li p {
    display: inline;
}