JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css">
<div id="content">
    <div id="bg1"></div>
    <div id="bg2"></div>
    <div id="bg3"></div>
    content body text content body text content body text 
    content body text content body text content body text content body text
    content body text content body text content body text content body text
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
    content body text content body text content body text content body text 
</div>

CSS

#content {
   -webkit-column-gap:25px;
   -webkit-column-count:3;
   -moz-column-gap:25px;
   -moz-column-count:3;
    column-gap:25px;
    column-count:3;
     position: relative;
}
#bg1 {position: absolute; width:33%;height:100%;background-color:green;z-index:-1;}
#bg2 {position: absolute; width:34%;height:100%;background-color:yellow;z-index:-1;right:33%}
#bg3 {position: absolute; width:33%;height:100%;background-color:red;z-index:-1;right:0}