JSFiddle - React, Tailwind, and code Playground

by simoncereska

HTML

<div id="wide_line">
  <div id="logo">Nice</div>
  &nbsp;
  <div id="wider_line">&nbsp;</div>
</div>
<div>...Context...</div>

CSS

#logo{  
  background: #aaaaaa;
  float:left;
  width: 100%;
}

#wide_line{
  background: #bbbbbb;
  float: left;
  width: 100%; 
  height: 7em; // controls height where context starts
}

#wider_line{
  background: #bbbbbb;
  float: left;
  width: 100%;
  height: 11em; // controls width of the overflow of the assigned color
}