JSFiddle - React, Tailwind, and code Playground

by donniec

HTML

<div class="content">
      <div class="left">
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
          <div>Hi, Flo!</div>
      </div>
      <div class="right">
          <div class="inner">
              <div class="row">
                Hi, Flo!<Br>
                Hi, Flo!<Br>
                Hi, Flo!<Br>
                Hi, Flo!<Br>
              </div>
          </div>
      </div>
    </div>

CSS

.content .left {
    float:left;
    width:100px;
    background-color:goldenrod;
}

.content .right{
    margin-left:100px;
    background-color:white;
}

.inner {
    border: 1px solid blue;    
}
.inner:before,
.row:before,
*:before {
    display: table; 
    content: " ";    
}

.inner:after, 
.row:after {
    clear:both; /*the push down*/
    display: table; 
    content: " ";    
}
.inner {
     overflow:auto; /* the fix http://stackoverflow.com/questions/20296560/twitter-bootstrap-clearfix-push-down */
}
*:before, *:after {
     box-sizing: border-box;   
}