HTML
<main id="container">
<article class="post post--first">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h4>Nunc eget imperdiet ligula, et bibendum felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque lectus neque, varius non consequat vitae, ullamcorper eu nisi.</h4>
<p>Donec cursus sapien eu ipsum tristique posuere. Donec tortor augue, blandit sit amet suscipit in, commodo non turpis. Quisque aliquam ornare dui eget lobortis. Maecenas gravida dolor vel commodo mollis. Cras eu accumsan sapien, quis porttitor mauris. Aliquam justo lorem, hendrerit at vulputate vitae, rhoncus eget orci. Sed sit amet luctus ex, eget posuere enim. Quisque ac nibh massa. Curabitur arcu nulla, volutpat ut elementum eu, luctus auctor lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper, nunc quis scelerisque faucibus, lectus tellus molestie risus, at venenatis elit augue sed mauris. Cras feugiat molestie massa eget pretium. Proin commodo efficitur justo, non pharetra elit consequat condimentum. Duis interdum purus eget bibendum auctor. Ut venenatis diam quis enim ultrices laoreet.</p>
</article>
<article class="post post--second">
<h1>Nulla tristique risus eget consectetur varius. Aenean nec tempus mauris.</h1>
<h4>Nulla aliquam maximus rhoncus. Ut in mi ac nibh faucibus ornare. Aliquam ultrices ut ante eu fringilla. Nam magna odio, sollicitudin sit amet ex vel, cursus venenatis est. Fusce tempus purus purus, et rhoncus magna laoreet a. Mauris cursus pretium urna quis aliquam. Proin eget pretium dui. Sed molestie lobortis neque, ac bibendum nulla fringilla at.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque aliquet augue, et ultricies tellus consequat eget. Nullam justo dolor, eleifend eu nulla sit amet, rutrum suscipit odio. Cras rhoncus, dolor a interdum scelerisque, risus dolor congue velit, ac pharetra dui diam quis odio. Vivamus sed mauris sed turpis mollis pharetra vitae sit amet lacus. Curabitur ullamcorper sollicitudin erat vitae sollicitudin. Quisque rutrum eleifend lectus, ut mollis enim aliquam non. Integer id venenatis odio. In hac habitasse platea dictumst. Duis sagittis justo ut risus vestibulum, sit amet rhoncus metus hendrerit. Sed quis consectetur purus. Quisque maximus purus sit amet ligula volutpat suscipit. Sed ullamcorper diam risus, eget malesuada dui elementum et. Quisque quam quam, pulvinar vitae viverra quis, dapibus eget erat. Vivamus lacinia mattis finibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque aliquet augue, et ultricies tellus consequat eget. Nullam justo dolor, eleifend eu nulla sit amet, rutrum suscipit odio. Cras rhoncus, dolor a interdum scelerisque, risus dolor congue velit, ac pharetra dui diam quis odio. Vivamus sed mauris sed turpis mollis pharetra vitae sit amet lacus. Curabitur ullamcorper sollicitudin erat vitae sollicitudin. Quisque rutrum eleifend lectus, ut mollis enim aliquam non. Integer id venenatis odio. In hac habitasse platea dictumst. Duis sagittis justo ut risus vestibulum, sit amet rhoncus metus hendrerit. Sed quis consectetur purus. Quisque maximus purus sit amet ligula volutpat suscipit. Sed ullamcorper diam risus, eget malesuada dui elementum et. Quisque quam quam, pulvinar vitae viverra quis, dapibus eget erat. Vivamus lacinia mattis finibus.</p>
</article>
</main>
CSS
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #34495E;
}
#container {
display: table;
width: 50%;
margin: 50px auto;
}
.post {
display: table-cell;
width: 50%;
padding: 30px;
}
.post--first { background-color: #ededed; }
.post--second { background-color: #ccc; }
