JSFiddle - React, Tailwind, and code Playground

HTML

<section class="row">
  <div class="left">
      <p>Left</p>
  </div>
  <div class="right-block">
    <div class="center">
      <p>Center</p>
    </div>
    <div class="right">
      <p>Right</p>
    </div>
  <div>
  </section>

<section class="row">
  <div class="left">
      <p>Left</p>
  </div>
  <div class="right-block">
    <div class="center">
      <p>Center</p>
    </div>
    <div class="right">
      <p>Right</p>
    </div>
  <div>
</section>

CSS

body {
    font-family: 'Arial';
    color: white;
}
.row {
  width: 100%;
  height: 180px;
  margin-top: 20px;
}
.left p, .right p {
  padding: 0 30px;
}
.left {
  height: 100%;
  background: red;
  width: 40%;
  float: left;
}
.center {
  width: 140px;
  height: 120px;
  margin: 0 20px;
  background: #4FBA49;
  float: left;
  text-align: center;
}
.right-block {
  height: 100%;
  margin-left: 20px;
  overflow: hidden;
}
.right {
  height: 100%;
  background: #FDCF1A;
  overflow: hidden;
  text-align: right;
}