JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>Longer item</li>
<li>Short</li>
<li>Even longer item</li>
<li>Another long item</li>
<li>And another one</li>
<li>Item6</li>
<li>Item 7</li>
<li>Average item</li>
<li>I need a few</li>
<li>This should be enough</li>
</ul>

CSS

ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

li {
  flex: 1 1 auto;
  list-style: none;
  padding: 5px;
}