JSFiddle - React, Tailwind, and code Playground

by FlasJunior

HTML

<div class="box clearfix">    
     <div class="col1">
         <img src="http://lorempixel.com/g/139/220/food/5/" />
    </div>
            
    <div class="col2">
        <div class="header">
             header
        </div>             
        <div class="footer">
             footer
        </div>
   </div>    
</div>

CSS

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

.box{
    position:relative;
    background:#ccc; padding:10px; 
}

.col1{
    float:left;
    background:red;
    vertical-align:top;
    width:140px;
}
.col2{
    background:green;
    float:right;
    vertical-align:top;
}

.header{
    background:blue;
}

.footer{
    background:yellow;
    position:absolute;
    bottom:10px;
}