JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<div class="bigbox border">
  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border" style="grow: 1">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>
</div>

CSS

.border {
  margin: 2px;
  border-style: dashed;
  border-width: 2px;
}

.boxofelements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 200px;
}

.element {
  width: 50px;
}

.bigbox {
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-around;
}