JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>

  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

CSS

ul {

  border:1px solid red;
  list-style: none;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

li{ width: 20%; border:1px solid gray;}
li:nth-child(1) {order:1;}
li:nth-child(2) {order:3;}
li:nth-child(3) {order:5;}
li:nth-child(4) {order:7;}
li:nth-child(5) {order:9;}
li:nth-child(6) {order:2;}
li:nth-child(7) {order:4;}
li:nth-child(8) {order:6;}
li:nth-child(9) {order:8;}
li:nth-child(10) {order:10;}
li:nth-child(5)~li { margin-left: 40%; }