JSFiddle - React, Tailwind, and code Playground

by Giovan Cruz

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="position-relative">
  <div class="container-fluid background-holder">
    <div class="row h-100">
      <div class="col-md-6 bg-primary">
        <p class="text-left">left split</p>
      </div>
      <div class="col-md-6 bg-warning">
        <p class="text-right">right split</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <section class="col-md-6">
        <h1>left content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. Sed non scelerisque nulla. Sed pharetra lacus sapien, et condimentum
        ante condimentum non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce magna lorem, lacinia congue varius blandit, facilisis quis nulla. Maecenas eu finibus tortor, sed volutpat justo. Fusce pulvinar
      </section>
      <section class="col-md-6">
        <h1>right content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. diam at placerat consectetur. Aliquam nec nisl luctus, imperdiet
        dolor non, feugiat ligula.
      </section>
    </div>
  </div>
</div>

CSS

.background-holder {
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container {
  border-left: 2px solid red;
  border-right: 2px solid red;
}