JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item grid__item--grow"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

SCSS

.grid {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 300px;
  &__item {
    width:15%;
    height: 100%;
    &:nth-of-type(1){
      background-color:#f3f3f3;
    }
    &:nth-of-type(2){
      background-color:grey;
    }
    &:nth-of-type(3){
      background-color:pink;
    }
    &:nth-of-type(4){
      background-color:red;
    }
    &:nth-of-type(5){
      background-color:green;
    }
    &--grow {
      flex-grow:1;
    }
  }
  
}