JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <ul>
    <div></div><li>1</li><div></div><li>2</li><div></div><li>3</li><div></div>
  </ul>
  <ol>
    <div></div><li>1</li><div></div><li>2</li><div></div><li>3</li><div></div>
  </ol>
</section>

CSS

section{height:97.6vh;width:97.6vw;background-color:white;text-align:center;}
ul,ol{
  width:80%;height:40%;border:1px solid black;list-style:none;padding:0;margin:0 auto;
  color:yellow;display:flex;align-items:center;
 }
ul{flex-direction:column;}
li:nth-child(2){background-color:blue;line-height:4vh;height:4vh;width:4vh;}
li:nth-child(4){background-color:red;line-height:8vh;height:8vh;width:8vh;}
li:nth-child(6){background-color:green;line-height:16vh;height:16vh;width:16vh;}
div{
  flex:1
}