<div class="container">
    <div class="item item--grow">
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="item item--grow">
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="item">
        <div class="row row--vertical"></div>
    </div>
    <div class="item item--grow">
        <div class="row"></div>
        <div class="row"></div>
    </div>
</div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
}

.item {
    height: 200px;
    flex-basis: 15%;
    
    background: #ccc;
    border: 1px solid #000;
}

.item--grow {
    flex-grow: 1;
}

.row {
    min-height: 50%;
}

.row:first-child {
    background: green;
}
.row:last-child {
    background: red;
}

.item .row--vertical {
    height: 100%;

    background: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.