JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<ul class="flex flex-row">
  <li>item 1</li>
  <li class="ddd">item 2 big</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>
  <li>item 11</li>
  <li>item<br>12</li>
  <li>item 13</li>
  <li class="aaa">item 14</li>
  <li class="bbb">item 15</li>
  <li class=ccc>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>-->
</ul>

CSS

ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid green;
}

li {
  padding: 10px;
  background: #acf;
  border: 1px solid #aaa;
  box-sizing: border-box;
  flex-grow: 1;
}
li.ddd {
  flex-grow: 2;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.flex-row { flex-direction: row; }
.flex-wor { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-loc { flex-direction: column-reverse; }

.aaa {
  order: 4;
  align-self: center;
}
.bbb {
  order: 3;
}
.ccc {
  order: 2
}