JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    Content above
</div>
<div id="wrapper">
  <div id="container">

    <div id="left-col" class="special">
      <p>Test content</p>
      <p>longer</p>
      <p>longer</p>
    </div>

    <div id="right-col" class="special">
      <p>Test content</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
      <p>longer</p>
    </div>

  </div>
</div>
<div class="content">
    Content below
</div>

CSS

#container {
      overflow: hidden;
      width: 100%;
    }
    .special {
      padding-bottom: 500em;
      margin-bottom: -500em;
    }
    #left-col {
      float: left;
      width: 50%;
      background-color: orange;
    }
    #right-col {
      float: left;
      width: 50%;
      background-color: red;
    }

    /* optional extras */
    #wrapper {
      background-color: green;
      padding: 20px;
    }
    .content {
      background-color: blue;    
    }
    }