JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
   <div id="header"><h1>Site Heading</h1></div>
   <div id="content">
     <h2>A Heading</h2>
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   </div>
   <div id="sidebar">
     <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
     <li>Vestibulum auctor dapibus neque.</li>
     </ul>  
   </div>
   <div id="footer">Footer</div>
   <div id="header-content">positioned header content</div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #333;
}

#wrapper {
  margin: 0 auto;
  width: 960px;
  background: #fff;
  position: relative;
}

#header {
  height: 200px;
  border-bottom: 1px solid #777;
}

#content {
float: right;
width: 600px;
}

#content > p, #content > h2 {margin: 10px 20px;}

#sidebar {
overflow: hidden;
background: #eee;
}

#footer {
clear: both;
border-top: 1px solid #777;
}

#header-content {
  position: absolute;
  height: 100px;
  top: 100px;
  width: 100%;
  background: #0f0;
 }