JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<div class="block1">
<div class="logo">
logo
</div>
</div>
<div class="block">
<div class="block2">
<div class="inner inner1">
inner1
</div>
<div class="inner inner2">
inner2
</div>
<div class="inner inner3">
inner3
</div>
</div>
<div class="block3">
<div class="link">
link
</div>
<div class="link">
link
</div>
<div class="link">
link
</div>
</div>
</div>
</div>
CSS
*{box-sizing: border-box;
background: grey;}
.wrap {
background-color: yellow;
padding: 40px 0;
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.block {
display: flex;
flex-flow: column;
flex: 0 1 80%;
}
.block1 {
background-color: red;
padding: 10px;
flex: 0 1 20%;
}
.logo {
padding: 30px;
background-color: white;
}
.block2 {
background-color: green;
padding: 10px;
}
.inner {
padding: 30px;
display: inline-block;
background-color: white;
}
.block3 {
background-color: grey;
padding: 10px;
}
.link {
padding: 30px;
display: inline-block;
background-color: white;
}