JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>p</li>
  <li>o</li>
  <li>w</li>
  <li>e</li>
  <li>r</li>
  <li>e</li>
  <li>d</li>
  <li> </li>
  <li>b</li>
  <li>y</li>
  <li> </li>
  <li>p</li>
  <li>s</li>
  <li>d</li>
  <li>f</li>
  <li>r</li>
  <li>e</li>
  <li>e</li>
  <li>b</li>
  <li>i</li>
  <li>e</li>
  <li>.</li>
  <li>c</li>
  <li>o</li>
  <li>m</li>
</ul>

CSS

ul{
  display:flex;
  text-align: center;
padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  flex: 1 4%;
}