JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div class="wrapper">
  <div class="box type-select">Select</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box icons">icons</div>
</div>

<hr/>

<div class="wrapper">
  <div class="box type-select">Select</div>
  <div class="type-condition">
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box icons">icons</div>
  </div>
  <div class="type-condition">
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box icons">icons</div>
  </div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 8px;
}

.type-condition {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
  gap: 8px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}