JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="parent-grid">
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
</div>

<br>
<br>

<div class="parent-table">
  <div class="child-table"></div>
  <div class="child-table"></div>
  <div class="child-table"></div>
</div>

CSS

/* GRID */
.parent-grid {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  height: 80px;
  width: 100%;
  background-color: red;
}

.child-grid {
  margin: 10px;
  margin-left: 0px;
  background-color: blue;
}
.child-grid:first-child { margin-left: 10px; }

/* TABLE */
.parent-table {
  display: table;
  height: 80px;
  width: 100%;
  background-color: red;
  border-spacing: 10px;
}

.child-table {
  display: table-cell;
  border-spacing: 10px;
  background-color: blue;
}
.child-table:nth-child(1) { width: 50%; }
.child-table:nth-child(2) { width: 25%; }
.child-table:nth-child(3) { width: 25%; }