CSS Regions

HTML

<div id="content">
    <div id="inside">
        <div class="flex">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>

<div class="region a"></div>
<div class="region b"></div>
<div class="region c"></div>

CSS

#content {
    -webkit-flow-into: flow;
}

#inside {
    height: 200px;
    width: 40%;
    border: 3px solid green;
}

.region {
    height: 50px;
    -webkit-flow-from: flow;
    border: 3px solid blue;
}

.region.a { width: 500px; }
.region.b { width: 400px; }
.region.c { width: 300px; }

.flex {
    border: 3px solid red;
    height: 125px;
    width: 70%;
    display: -webkit-flex;
}

.item {
    -webkit-flex: 1;
    -webkit-flex-direction: column;
    border: 3px solid yellow;
}