JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

div {
  border: 1px solid red;
}

#outer {
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#left {
  margin-right: auto;
}

#right {
  margin-left: auto;
}