JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="wrapper">
    <div class="block55">55%</div>
    <div class="block45">45%</div>
  </div>
</section>

CSS

body {
  background: yellow;
}
section {
  overflow-x: hidden;
  padding: 100px 0;
}
.wrapper {
  width: 80%;
  display: flex;
  flex-direction: row;
  margin: auto;
  border: 1px dashed black;
}
.block55 {
  width: 55%;
  background: red;
  position: relative;
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ffffff;
  font-size: 100px;
}
.block55:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: red;
  width: 5000px;
  z-index: -1;
}
.block45 {
  width: 45%;
  background: green;
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ffffff;
  font-size: 100px;
}