JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div>Header</div>

<div class="columns">
    <div class="columnsmask">
        <div class="area">
            <div class="col1">Col1<br />dasfCol1<br />dasfCol1<br />dasfCol1<br />dasfCol1<br />dasfCol1<br />dasf</div>
            <div class="col2">Col1<br />dasfCol1<br />dasfCol1<br />dasf</div>
        </div>
    </div>
</div>
    <div>Footer</div>

CSS

.columnsmask{
    background: red;
}
.columnsmask:before,
.columnsmask:after,
.area:before,
.area:after{
    content:"";
    display:table;
}

.columnsmask:after,
.area:after{
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.columnsmask,
.area{
    *zoom:1;
}

.columnsmask{
    background: green;
    width: 180px;
    position: relative;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.col1{
    float: left;
    width: 180px;
}
.col2{
    float: right;        
    width: 420px;
    position: relative;
}
.columns{
    margin: 0 auto;
    background: red;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.area, .columns{
    width: 600px;
}