JSFiddle - React, Tailwind, and code Playground

by alexandr2006

HTML

<div class="wrap">
<div class="left">left</div>
<div class="center">center</div>
<div>right</div>
</div>

CSS

div {
  border: 1px solid red
}

.wrap {
  display: inline-flex;
  border-color: blue;
  justify-content: space-between;
  min-width: 300px;
  position: relative;
}
.wrap:before {
  content:"";
  position: absolute;
  left: 50%;
  background: pink;
  height: 100%;
  z-index: -1;
  width: 50%;
}

.left {width: 100px;}

.center {
  align-items: center;
  padding: 0 20px;
}