JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="h-x-lyrics">
  <li class="p-lyric h-x-lyric">
    <span>[<time class="p-start-time">00:00</time>-<time class="p-end-time">00:01</time>]</span>
    <span class="p-content">Is this the real life?</span>
  </li>
  <li class="p-lyric h-x-lyric">
    <span>[<time class="p-start-time">00:01</time>-<time class="p-end-time">00:02</time>]</span>
    <span class="p-content">Is this just fantasy?</span>
  </li>
  <li class="p-lyric h-x-lyric">
    <span>[<time class="p-start-time">00:04</time>-<time class="p-end-time">00:05</time>]</span>
    <span class="p-content">Caught in a landslide,</span>
  </li>
  <li class="p-lyric h-x-lyric">
    <span>[<time class="p-start-time">00:05</time>-<time class="p-end-time">00:06</time>]</span>
    <span class="p-content">no escape from reality.</span>
  </li>
</ol>

CSS

ol {
  margin: 2em;
  padding: 0;
  list-style: none;
}
li span:first-child {
  font-size: smaller;
  color: grey;
  margin-right: 1em;
}