JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
        <div class="col profile yellow"></div>
        <div class="col menu green"></div>
    </div>
    <div class="row">
        <div class="col main red"></div>
        <div class="col aside">
            <div class="row info turquoise"></div>
            <div class="row contact purple"></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) }
.turquoise { background-color: rgb(94, 184, 175) }
.purple { background-color: rgb(155, 76, 155) }

.main, .profile, .menu, .info, .contact {
    border: 5px solid white;
}
.profile, .menu {
    flex-grow: 1;
    height: 200px;
}
.aside {
    height: 400px;
    flex-grow: 1
}
.main {
    height: 400px;
    flex-grow: 2;
}
.news, .posts {
    min-height: 100px;
    width: 100%;
}
.info, .contact {
    height: 200px;
}