JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>


<!-- CUT AND PASTE this into any list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat. Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metus. Vestibulum dignissim urna ut est aliquam, in porttitor quam vestibulum. Sed mauris ligula, condimentum ultrices volutpat non, semper sed urna. Vestibulum sagittis sit amet libero quis porta. Nam eget augue ac odio dictum iaculis. Cras eget magna sodales, tristique ante et, dictum lectus. Suspendisse eget lacinia ex, sit amet condimentum leo. Proin vestibulum nisl et purus luctus eleifend.

-->

CSS

ul {
     display: flex; /* establish flex container */
}


/* non-essential decorative styles */

ul {
    justify-content: space-between;
    list-style: none;
    margin: 0;    
    padding: 0;
    border: 1px solid #777;
    background-color: yellow;
}

li {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    margin: 5px;
    /* center li content */
    display: flex;
    justify-content: center;
    align-items: center;
}