JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
  <span>item4</span>
    <span>item5</span>
  <span>item6</span>
    <span>item7</span>
  <span>item8</span>
    <span>item9</span>
  <span>item10</span>
    <span>item11</span>

</div>

CSS

.wrap { border: 2px solid; overflow: hidden; text-align:justify;}
.wrap:after {
  content:"";
  display: inline-block;
  width: 100%;
}

span { display:inline-block; border: 1px solid blue; width:100%; max-width: 160px;  box-sizing: border-box; text-align: center; margin: 0 auto; }