<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%;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.