JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="left">
    left
  </div>
  <div class="mid">
    <pre>
      <code>                                                    ff</code>
    </pre>
  </div>
  <div class="right">
    right
  </div>
</div>

<div class="test">
  <div class="left">left</div>
  <div class="mid">mid</div>
  <div class="right">right</div>
</div>

CSS

.test {
  width: 600px;
  background-color: #cacaca;
  display: grid;
  grid-template-columns: 0.25fr 1fr 0.25fr;
  margin-bottom: 50px;
}

.left {
  background-color: green;
}

.right {
  background-color: red;
}