<div class="wrapper">
  <div class="article">
    <h1>A big heading</h1>
    <p>A paragraph of filler text. La la la de dah de dah de dah de la.</p>
  </div>
  <div class="sidebar">
    <h6>A heading so small it's barely a heading</h6>
    <p>More filler text. Blah de blah de blah de blah blah blah blah.</p>
  </div>
</div>
.wrapper {
  display: flex;
  background: white;
  color: indigo;
  padding: 1em;
}
.article, .sidebar {
  flex-grow: 1;
  display: inline-block; /* fallback */
  padding: 0 0.5em;
}
.article {
  width: 60%; 
  float: left; 
  margin-right: 0.5em;
  background: mistyRose;
}
.sidebar {
  width: 35%; 
  background-color: lavender; 
}

body {
  background: indigo;
  margin: 0.5em;
  font-family: serif;
}
h1,h2,h3,h4,h5,h6 {
  font-family: sans-serif;
  margin-bottom: 0.5em;
}
h1 { font-size: 200%;}
h2 { font-size: 180%;}
h3 { font-size: 150%;}
h4 { font-size: 125%;}
h5 { font-size: 110%;}
h6 { font-size: 100%;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.