JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="align-left"></div>
  <div class="centered">
  </div>
</div>

<div class="wrapper">
  <div class="align-left"></div>
  <div class="centered">
  </div>
</div>

<div class="wrapper">
  <div class="align-left"></div>
  <div class="centered">
  </div>
</div>

CSS

.wrapper {
  width: 600px;
  height: 100px;
  text-align: center;
  position: relative;
  border: 5px solid black;
}

.wrapper + .wrapper {
  margin-top: 20px;
}

.wrapper:nth-child(2) {
  width: 500px;
}

.wrapper:nth-child(3) {
  width: 410px;
}

.align-left {
  display: inline-block;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100px;
  height: 100%;
  z-index: 0;
}

.centered {
  display: inline-block;
  background-color: green;
  width: 300px;
  height: 100%;
  
  // so the overlap is more visual
  z-index: 1;
  position: relative;
}