JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item<br>4</li>
  <li>item 5</li>
  <li class="six">item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item<br>16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>

CSS

ul {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: space-between;
  margin: 0;
  padding: 10px;
  height: 400px;
  list-style: none;
  border: 1px solid green;
}

li {
  order: 2;
  padding: 10px;
  width: 70px;
  background: #acf;
  border: 1px solid #aaa;
}
.six { order: 1; }
li:nth-child(5) {
  align-self: flex-end;
}