JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li>Line1 this is a very long line that will break the layout</li>
    <li>Line2</li>
    <li>Line3</li>
    <li>Line4 this is a very long line that will break the layout</li>
    <li>Line5</li>
    <li>Line6</li>
    <li>Line7 this is a very long line that will break the layout</li>
    <li>Line8</li>
    <li>Line9</li>
</ul>

CSS

#list {
  display: flex;
  flex-wrap: wrap;
}
#list li{
  width: 33%;
  border: 1px #000 solid;
}