JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<div class="left">Left</div>
<div class="middle">Middle Middle Middle Middle Middle</div>
<div class="right">Right</div>
</div>

CSS

div {
  border: 1px solid red;
}

.left,
.middle,
.right {
  width: fit-content;
  height: fit-content;
  grid-row: 1;
}

.outer {
  width: 500px;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  align-items: center;
}

.left {
  justify-self: start;
}

.middle {
  justify-self: center;
}

.right {
  justify-self: end;
}