<div class="columns">
<div class="column main-column">
<article class="article">
Hello World
</article>
<article class="article">
Hello World
</article>
</div>
<div class="column">
<article class="article">
Hello World
</article>
<article class="article">
Hello World<br>
Foo Bar
</article>
<article class="article">
Hello World
</article>
</div>
</div>
html {
font-family: sans-serif;
}
.columns {
display: flex;
}
.column {
background: #eee;
border: 5px solid #ccc;
display: flex;
flex: 1;
flex-direction: column;
padding: 10px;
}
.main-column {
flex: 2;
}
.article {
background: mediumseagreen;
border: 5px solid seagreen;
color: white;
flex: 1;
margin: 10px;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.