JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="box">
  <div class="flex-item">1
    <div>11</div>
    <div>12</div>
    <div>13
      <div>1A</div>
      <div>1B</div>
      <div>1C</div>
      <div>1D</div>
    </div>
  </div>
  <div class="flex-item">2
    <div>21
      <div>2A</div>
      <div>2B</div>
      <div>2C</div>
    </div>
    <div>22</div>
  </div>
  <div class="flex-item">3
    <div>31</div>
    <div>32
      <div>3A</div>
      <div>3B</div>
    </div>
    <div>33
      <div>3AA</div>
      <div>3BB</div>
    </div>
  </div>
  <div class="flex-item">4
    <div>41
      <div>4A</div>
      <div>4B</div>
      <div>4C</div>
      <div>4D</div>
    </div>
    <div>42
      <div>4AA</div>
      <div>4BB</div>
      <div>4CC</div>
    </div>

    <div>43
      <div>4A</div>
      <div>4B</div>
      <div>4C</div>
      <div>4D</div>
    </div>
    <div>44
      <div>4AA</div>
      <div>4BB</div>
      <div>4CC</div>
    </div>

    <div>45
      <div>4A</div>
      <div>4B</div>
      <div>4C</div>
      <div>4D</div>
      <div>4E</div>
    </div>

  </div>
  <div class="flex-item">5
    <div>51</div>
    <div>6
      <div class="normal">61</div>
    </div>
  </div>
  <div class="flex-item">7
    <div>
      <div>71</div>
      <div>72</div>
      <div>73</div>
      <div>74</div>
    </div>

  </div>
</div>

CSS

.box {
  display: flex;
  font-size: 10px;
  border: green solid 1px;
  box-sizing: border-box;
  height: 264px;
}

.flex-item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 0 0 11.5%;
  font-size: 1.2rem;
}

.flex-item:nth-child(4) {
  flex: 0 0 37.5%;
}

.flex-item>div {
  font-size: 1.6rem;
}

.flex-item>div>div {
  font-size: 1.4rem;
  color: blue;
}

.flex-item:nth-child(4)>div:nth-child(3),
.flex-item:nth-child(4)>div:nth-child(5) {
  margin-top: 22px;
}

.normal {
  color: #000 !important;
  font-size: 1.6rem !important;
}