<div class="flex row container">
<div class="element">
Left Item
</div>
<div class="flex col">
<div class="element">
Right Item 1
</div>
<div class="element">
Right Item 2
</div>
</div>
</div>$gutter: 20px;
.element {
padding: $gutter / 2;
border: 2px solid #aaa;
min-width: 200px;
color: #eee;
background-color: #333;
font-size: 26px;
}
.flex {
display: flex;
box-sizing: border-box;
}
.row {
flex-flow: row wrap;
}
.col {
flex-flow: column wrap;
}
External CSS
This Pen doesn't use any external CSS resources.