JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="one">
    <div class="one-c"></div>
  </div>
  <div class="two">
    <div class="two-c"></div>
  </div>
  <div class="three">
    <div class="three-c"></div>
  </div>
</div>

CSS

.parent {
  display: flex;
}

.parent>div {
  width: 100%;
}

.one {
  width: 100px;
  height: 100px;
  background: black;
}

.two {
  width: 100px;
  height: 100px;
  background: red;
  display: flex;
  justify-content: center;
}

.three {
  width: 100px;
  height: 100px;
  background: yellow;
}

.two-c {
  height: 100%;
  width: 60px;
  background: white;
}