JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row header blue"></div>
    <div class="row main">
        <div class="col aside red"></div>
        <div class="col main">
            <div class="row news green"></div>
            <div class="row posts yellow"></div>
            <div class="row">
                <div class="col info turquois"></div>
                <div class="col contact purple"></div>
            </div>
        </div>
    </div>

CSS

* {
    box-sizing: border-box;
}
.row {
    display: flex;
    width: 100%;
}
.col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.red { background-color: rgb(170, 43, 43) }
.blue { background-color: rgb(48, 48, 153) }
.green { background-color: rgb(43, 110, 43) }
.yellow { background-color: rgb(214, 214, 77) }
.turquois { background-color: rgb(94, 184, 175) }
.purple { background-color: rgb(155, 76, 155) }
.header, .aside, .news, .posts, .info, .contact {
    border: 5px solid white;
}
.header {
    height: 100px;
}
.aside {
    height: 400px;
    flex-grow: 1
}
.main {
    height: 300px;
    flex-grow: 2;
}
.news, .posts {
    min-height: 100px;
    width: 100%;
}
.info, .contact {
    height: 200px;
}