<div class="container">
  <div class="left">
    <div class="left-item">left</div>
  </div>
  <div class="right">
    <div class="right-item">right</div>
  </div>
  <div class="mid"></div>
</div>
html, body {height: 100%;}
.container {position: relative; height: 100%;}
.left, .right {width: 50%; height: 100%; float: left; overflow: hidden;}
.left-item {height: 200px; margin-right: 100px; background-color: #4688f5;}
.right-item {margin-left: 100px; height: 100px; background-color: tomato;}
.mid {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 100%; background-color: yellow;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.