JSFiddle - React, Tailwind, and code Playground

HTML

<div class="poem-container">
    <div class="poem">
<h1>Sonnet 18</h1>
<ol class="verse">
<li class="stanza">Shall I compare thee to a summer's day?</li>
<li>Thou art more lovely and more temperate.</li>
<li>Rough winds do shake the darling buds of May,</li>
<li>And summer's lease hath all too short a date.</li>
<li class="fallback" value="5">Sometime too hot the eye of heaven shines,</li>
<li>And often is his gold complexion dimmed;</li>
<li>And every fair from fair sometime declines,</li>
<li class="nopoem">*** not part of the poem here ***</li>
<li>By chance, or nature's changing course, untrimmed;</li>
<li class="stanza">But thy eternal summer shall not fade,</li>
<li class="fallback" value="10">Nor lose possession of that fair thou ow'st,</li>
<li>Nor shall death brag thou wand'rest in his shade,</li>
<li>When in eternal lines to Time thou grow'st.</li>
<li>So long as men can breathe, or eyes can see,</li>
<li>So long lives this, and this gives life to thee.</li>
</ol>
</div>
</div>

CSS

div.poem-container { width: 90%; text-align: left; 
    margin: 0 auto; }

div.poem { margin: 0 auto; display: table;  }

.poem h1{ font-size:1em; padding-bottom: 1em; text-align: center; }
ol.verse { counter-reset: line; width: auto; margin: 0 auto; font-size: 0.75em; line-height: 1.5; }

ol.verse li {list-style-type:none; }

ol.verse li:not(.nopoem):before { counter-increment: line 1; content: counter(line); width: 2em; display: block; float: left; margin-left: -2em;  visibility:hidden}

ol.verse li.stanza:not(:first-child) {
  padding-top: 1.5em;
}    

ol.verse li.fallback {
  color: red;   
}

ol.verse li.fallback:before {
  visibility:visible;
}