JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.grid {
  display: inline-grid;
  grid-template-columns: max-content auto max-content;
  background: magenta;
  border: solid;
}
.item {
  grid-column: 1 / 3;
  background: cyan;
}
.item + .item {
  grid-column: 2 / 4;
}
.item::before, .item::after {
  content: '';
  float: left;
  width: 50px;
  height: 50px;
}