JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div {
  border: 1px solid red;
}

.left,
.middle,
.right {

}

.outer {
  width: 500px;
  height: 100px;
  display: grid;
  
  /* 
 static minmax gets assigned first, then 1fr 
 This means the center col will be assigned space first, then the sides.
 But it also means the side columns will not be symmetrical, so the center column is not absolutely center.
 But this allows the content to take the white space either side of it for each col.
  */  
  grid-template-columns: 1fr minmax(min-content, max-content) 1fr;

  align-items: center;
}

.left {
  justify-self: start;

}

.middle {
  justify-self: center;
}

.right {
  justify-self: end;

}