JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>first child</li>
  <li>second element with extra long text</li>
  <li>3rd element</li>
  <li>4th</li>
  <li>5th element</li>
  <li>6th element</li>
</ul>

CSS

ul {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:0;
  margin:0;
}
li {
  background-color:#f00;
  list-style:none;
  padding:5px;
  margin:1px;
}