JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<div class="threecol">
  <div class="colmid">
    <div class="colleft">
      <div class="col1">1</div>
      <div class="col2">2</div>
      <div class="col3">3</div>
    </div>
  </div>  
</div>

CSS

*{
  box-sizing: border-box;  
}
.threecol {
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    overflow: hidden;
}
.colmid, .colleft {
    float: left;
    width: 100%;
    position: relative;    
}
.colmid{
  right: 25%;
}
.colleft {   
   right: 50%;
}
.col1, .col2, .col3 {
    float: left;
    position: relative;
    /* padding: 0 0 10px 0; */
    overflow: hidden;
}
.col1 {
    width: 40%;
    left: 102%;
    background:#cc0000;
}
.col2 {
    width: 30%;
    left: 31%;
    background:#cc00cc;
}
.col3 {
    width: 30%;
    left: 85%;
    background:#00cc00;
}