JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
  <p>In Firefox, if the 'header' div is self-collapsing the wide green box avoids the content box rather than the margin box of the div with the green image. WebKit, IE and Opera avoid the margin box, just like they do when the 'header' div isn't self-collapsing.</p>
  <div id="header">
     <h1 id="logo" class="single right"></h1>
  </div>

  <div id="sidebar" class="single right">
      <img src="http://trac.webkit.org/export/144230/trunk/LayoutTests/fast/css/resources/greenbox-100px.png" width="61" height="95"/>
  </div>

  <div id="content" class="triple">
      <img src="http://trac.webkit.org/export/144230/trunk/LayoutTests/fast/css/resources/greenbox-100px.png" width="590" height="110"/>
  </div>
</body>

CSS

<style>
    body {
      width: 810px;
    }

    div {
      border: 1px solid #425874;
    }

    .right {
      float: right;
    }

    .single {
      width: 200px;
    }
    .triple {
      width: 600px;
    }

    #header #logo {
      width: 190px;
      height: 41px;
    }

    #sidebar {
      clear: right;
      padding-left: 22px;
      background-color: blue;
    }
</style>