<section class="container">
<div class="left-half">
<article>
<h1>Left Half</h1>
<p>Weekends don't count unless you spend them doing something completely pointless.</p>
</article>
</div>
<div class="right-half">
<article>
<h1>Right Half</h1>
<p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
</article>
</div>
</section>
/* Pen-specific styles */
html, body, section {
height: 100%;
}
body {
color: #fff;
font-family: sans-serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
text-shadow: 0 2px 2px #b6701e;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem 0;
}
/* Pattern styles */
.container {
display: flex;
}
.left-half {
background-color: #ff9e2c;
flex: 1;
padding: 1rem;
}
.right-half {
background-color: #b6701e;
flex: 1;
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.