JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="left"></div>
    
    <div class="center-wrapper">
      <div class="center"></div>
    </div>
    <div class="right"></div>
</div>

CSS

.left {
  width: 25%;
  height: 38px; 
  float: left;
  background-color: black;
}

.center-wrapper {
  width: 50%;
  height: 38px;
  float: left;
 // margin: 0  auto;

}
.center{
    background-color: red;
    width: 50%;
    margin: 0 auto;
    height: 38px;
}

.right {
  width: 25%;
  height: 38px;
  float: right; 
  background-color: green;
}