JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red">
  red
</div>
<div class="green">
  green
</div>
<div class="blue">
  blue
</div>

CSS

* { box-sizing: border-box; }
html, body { background: gray; margin: 0 }

.red {
  background: red;
  position: absolute;
  opacity: .3;
  top: 0;
  left: 0;
  height: 100%;
  width: 55.5%;
}

.green {
  border: 2px solid green;
  height: 100vh;
  margin: 0 auto;
  width: 1360px;
}

.blue {
  border: 2px solid blue;
  position: absolute;
  top: 50%;
  left: calc(50vw - ((1360px / 2)));
  width: calc(55.5% - (50vw - ((1360px / 2))));
}