JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul>
  <li>
    <div>1 <br>1<sup>bis</sup><br>1<sup>ter</sup></div>
  </li>
  <li>
    <div>2</div>
  </li>
  <li>
    <div style="padding:0;">3</div>
  </li>
</ul>

CSS

ul {display:flex; list-style:none; flex-wrap:wrap; margin:0; padding:0; background:firebrick}
  li {flex:1; display:flex; padding:0 10px; margin:20px 0; background:beige; align-items:center;}
  li:not(:first-child) {border-left:1px solid red;}
  
  div {background:tomato; padding:40px; text-align: center; font-family:sans-serif; font-size:20px; flex:1;}