<div class="wrapper">
<div class="box box1">
<p>This is box one.</p>
</div>
<div class="box box2">
<div class="box box5">
<p>This is box five.</p>
</div>
<div class="box box6">
<p>This is box six.</p>
</div>
</div>
<div class="box box3">
<p>This is box three.</p>
</div>
</div>
.box {
border: 5px solid #A5C5C7;
background-color: #DAE7E8;
border-radius: 5px;
padding: 10px;
flex: 0 1 200px;
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-flow: row wrap;
width: 800px;
}
.box2 {
display: contents;
border: 5px solid #FB751C;
background-color: #F9A54F;
}
.box6 {
flex: 0 1 400px;
}
.box3 {
flex: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.