JSFiddle - React, Tailwind, and code Playground

HTML

<div class="space_between">
  <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>

<div class="space_around">
  <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

div { display: flex; flex-wrap: wrap; border: 2px solid; padding: 20px; }
span { border: 1px solid blue; width: 100%; max-width: 160px; box-sizing: border-box; text-align: center; }

.space_between { justify-content: space-between; }
.space_around { justify-content: space-around; }