JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>123456</li>
  <li>123456</li>
  <li>123456<br>123456<br>123456</li>
  <li>123456</li>
  <li>123456</li>
  <li>123456</li>
</ul>

<ul>
  <li>123456</li>
  <li>123456</li>
  <li>123456<br>123456<br>123456</li>
  <li>123456</li>
  <li>123456</li>
  <li>123456</li>
</ul>

CSS

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
最後のulは幅を10emとするのでliに折り返し発生
*/
ul:last-of-type {
  width: 10em;
  flex-flow: row wrap;
  justify-content: space-between;
}

ul li {
  flex:1;
  background-color: #aaa;
  margin: 5px;
}