JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<div class="kid1">FIRST</div>
<div class="kid1">FIRST</div>
<div class="kid1">FIRST</div>

<div class="kid2">SECOND</div>
<div class="kid2">SECOND</div>
<div class="kid2">SECOND</div>
<div class="kid2"></div>
</div>

CSS

.parent {
  border: 1px solid orangered;
  display: flex;
  flex-flow: row nowrap;
  height: 200px;
  width: 80%;
}

.kid1 { padding: 20px; }
.kid1:nth-child(1) { background: lime}
.kid1:nth-child(2) { background: blue}
.kid1:nth-child(3) { background: yellow}

.kid2 { padding: 20px; }
.kid2:nth-child(1) { background: orange} /*is counting starting with first elemewnt of the parent*/
.kid2:nth-child(2) { background: red}
.kid2:nth-child(3) { background: red}
.kid2:nth-child(4) { background: cyan}