JSFiddle - React, Tailwind, and code Playground

by Kris Coulson

HTML

<div id="cont">
    <div id="header">
        <div style=" float:left; background-color:pink; width:20%; height:40px; ">THis is left</div>
        <div style=" float:left; background-color:gray; width:70%; height:40px; ">
            <div id="htop">This is top</div>
            <div id="hbutt">this is buttom</div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

CSS

#cont {
      background-color:yellow;
      width:900px;
      height:300px;
      margin:auto;
      padding:40px;
  }
  #header {
      background-color:red;
      width:100%;
      padding:5px;
  }
  #cont2 {
      background-color:blue;
      width:10%;
      height:auto;
      padding:5px;
      clear:both;
  }
  #htop {
      background-color:maroon;
  }
  #hbutt {
      background-color:purple;
  }
.clearfix{
    clear:both;
}