JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul data-state="2" data-max="2" class="grow">
  <li><span>1000100010001000</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
</ul>

<ul data-state="1" data-max="2" class="grow">
  <li><span>1000100010001000</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
</ul>

<ul data-state="3" data-max="2" class="grow">
  <li><span>1000100010001000</span></li>
  <li><span>2</span></li>
  <li><span>3</span></li>
  <li><span>4</span></li>
</ul>

SCSS

ul {
  display: flex;
}

.grow {margin:10px; flex-wrap: wrap;
  > * {
    //width: 50px;
    //min-width: 50px;
    flex: 1 1 auto;
    background-color: tomato;
    outline: 1px solid firebrick;
    text-align: center;
  }
  &[data-state="1"] > * {
    flex-basis:0;
  }
  
   &[data-state="3"] > * {
    flex-basis:50%;
  }
}