JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<div class="columns" id="columns">
    <div role="main" class="content-column" id="content-column">
        
        
        <div class="content-inner">
            <!-- region: Highlighted -->
            <section id="main-content">this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..this is the main text..</section>
            <!-- /end #main-content -->
            <!-- region: Content Aside -->
        </div>
        <!-- /end .content-inner -->
        
        
            <!-- regions: Sidebar first and Sidebar second -->
            <div class="region region-sidebar-first sidebar">therea re many things I should write here.  It could be very long.</div>
    <div class="region region-sidebar-second sidebar">coffee is not enough. there must be more.</div>
        
        
        
        
        
        
        
        
    </div>
    <!-- /end #content-column -->

    
    <div style="clear: both">
clearer div with
<code>clear: both</code>
</div>
</div>

CSS

#columns {
    	border: 1px solid #000000;
	overflow: hidden;
	width: 100%;
}
.region-sidebar-first {
    float: right;
    width: 100px;
    background: red;
}
.region-sidebar-second {
    float: left;
    width: 100px;
    background: green;
}
#main-content {
    width 80%;
}