<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.