JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="grid">
  <div class="column">
    <button>button 1</button><button>button 2</button>
  </div>
  <div class="column">
    This is where the title is
  </div>
  <div class="column">
    <button>button 1</button><button>button 2</button>
  </div>
</div>

SCSS

.grid {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  justify-content: space-between;
  grid-gap: 1rem;
}

.column {
  height: 50px;
  background: red;
  text-align: center;
  
  &:first-of-type {
    text-align: left;
  }
  
  &:last-of-type {
    text-align: right;
  }
}