JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="container">
  <div class="row">
    <div class="flex-item-1">
      <span>A</span>
      <div class="flex-item-2">AA1</div>
      <div class="flex-item-2">AA2</div>
      <div class="flex-item-2">AA3</div>
    </div>
    <div class="flex-item-1">
      <span>B</span>
      <div class="flex-item-2">BB1</div>
      <div class="flex-item-2">BB2</div>
      <div class="flex-item-2">BB3</div>
    </div>
    <div class="flex-item-1">
      <span>C</span>
      <div class="flex-item-2">
        <span>CC1</span>
        <div class="flex-item-3">CC1A</div>
        <div class="flex-item-3">CC1B</div>
        <div class="flex-item-3">CC1C</div>
      </div>
      <div class="flex-item-2">
        <span>CC2</span>
        <div class="flex-item-3">CC2A</div>
        <div class="flex-item-3">CC2B</div>
        <div class="flex-item-3">CC2C</div>
      </div>
      <div class="flex-item-2">
        <span>CC3</span>
        <div class="flex-item-3">CC3A</div>
        <div class="flex-item-3">CC3B</div>
        <div class="flex-item-3">CC3C</div>
      </div>
    </div>
    <div class="flex-item-1">D</div>
    <div class="flex-item-1">E</div>
  </div>
</div>

CSS

.row {
  display: flex;
  flex-flow: row wrap;
}

.flex-item-1 {
  flex: 0 0 12.5%;
  height: 20px;
  outline: green dashed 1px;
}

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

/* .flex-item-1:nth-child(3) {
  display: flex;
  flex-flow: row wrap;
} */

.flex-item-1:nth-child(3) .flex-item-2 {
  float: left;
}