JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="sidebar-container sidebar-container-main">
      <div class="sidebar-inner-l">
          <div class="sidebar-l">
123
          </div>
      </div>
      <div class="main">
123
      </div>
  </div>
  <div class="sidebar-container">
      <div class="sidebar-inner-r">
            <div class="sidebar-r">
             
            </div>
      </div>
  </div>
</div>

CSS

html, body { padding: 0; margin: 0 ; overflow: hidden; }
* { height: 100% }

.container{ padding: 0 100px; background: #CCC; }

.sidebar-container { width: 50%; float: left; }
.sidebar-inner-l { padding-right: 50px; }
.sidebar-inner-r { padding-left: 50px; }

.sidebar-l,
.sidebar-r{ background: #FFF; }

.sidebar-container-main { position: relative; }
.main { position: absolute; top:0; right: -50px; width: 100px; background: wheat; }