JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con" class="clearfix">
<div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis pulvinar rutrum. Fusce ac suscipit tellus. </div>

<div id="cen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis pulvinar rutrum. Fusce ac suscipit tellus. 
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
Nulla ac vehicula sapien, nec euismod elit. Pellentesque ullamcorper lacus nisi, a condimentum risus accumsan at.
</div>

<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis pulvinar rutrum. Fusce ac suscipit tellus. 
</div>
    
</div>

CSS

#con {
    overflow: hidden;
    width: 700px;
}
#left {
    background: none repeat scroll 0 0 #787878;
    float: left;
    margin-bottom: -200px;
    padding-bottom: 200px;
    width: 130px;
}
#cen {
    background: none repeat scroll 0 0 #535353;
    float: left;
    margin-bottom: -200px;
    padding-bottom: 200px;
    width: 500px;
}
#right {
    background: none repeat scroll 0 0 #A2A2A2;
    float: left;
    margin-bottom: -200px;
    padding-bottom: 200px;
    width: 70px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}