JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<ul class="flex flex-row flex-w flex-sb">
  <li>item 1</li>
  <li>item 2<br>a</li>
  <li class="pop">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<br>a<br>a</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li class="pop">item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17<br>a</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>

<br><br>

<p class="flex flex-wor flex-wr flex-sa">
  <span>item 1</span>
  <span>item 2</span>
  <span>item 3<br>a</span>
  <span>item 4</span>
  <span>item 5</span>
  <span>item 6<br>a<br>a<br>a</span>
  <span>item 7</span>
  <span>item 8</span>
  <span>item 9</span>
  <span>item 10<br>a</span>
  <span>item 11</span>
  <span>item 12</span>
  <span>item 13</span>
  <span>item 14</span>
  <span>item 15</span>
  <span>item 16</span>
  <span>item 17</span>
  <span>item 18</span>
  <span>item 19<br>a<br>a</span>
  <span>item 20</span>
</p>

CSS

ul, p { margin:0; padding: 10px; list-style: none; border: 1px solid green; }
li, span { float: left; padding: 10px; background: #acf; border: 1px solid #aaa; }
.flex { display: flex; }

.flex-row { flex-direction: row; }
.flex-wor { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-loc { flex-direction: column-reverse; }
.flex-nw { flex-wrap: nowrap; }
.flex-w { flex-wrap: wrap; }
.flex-wr { flex-wrap: wrap-reverse; } 

.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.flex-center { justify-content: center; }
.flex-sb { justify-content: space-between; }
.flex-sa { justify-content: space-around; }

ul { align-items: start; }
p { align-items: flex-start; }

li { order: 21; }
.pop {
  background: orange;
  order: 4;
  align-self: stretch;
}