JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
    <div id="logo">Text</div>
    <div id="messages">Text</div>
    <div id="notifications">notifications</div>
    <div id="search">search</div>
    <div id="searchArea">searchingarea</div>
    <div id="profileArea">Profile</div>
    <div id="options">Options</div>
</header>
<main>
<nav>
    <div class="link">Text</div>
    <div class="link">Text</div>
                List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>List<br><br><br><br>
</nav>
<section id="content">
   <div id="headline">
        Text
    </div>
     <div id="contentText">
        <div id="left">
           ...

CSS

* {
	margin: 0;
	padding: 0;
}
html,body {
	height: 100%;
    width: 100%;
}
header { 
    display: flex;
	height: 60px;
    width: 100%;
	background-color: green;
}
#logo{
    width: 15%;
    background-color: red;
}
#messages{
    width: 5%;
    background-color: yellow;
}
#notifications{
    width: 5%;
    background-color: red;
}
#search{
    width: 5%;
    background-color: yellow;
}
#searchArea{
    flex: 1;
    background: red;
}
#profileArea{
    width: 10%;
    background: yellow;
}
#options{
    width: 3%;
    background: red;
}
main{
    display: flex;
    width: 100%;
    height: calc(100% - 60px);
    min-height: calc(100% - 60px);
    background: blue;
}
nav { 
    width: 15%;
    min-height: 100%;
	background-color: green;
}
.link{
    width: 100%;
    height: 3%;
    background-color: yellow;
}
#content{
    display: flex;
    flex-direction: column;
    width: 85%;
    height: 100%;
    min-height: 100%;
    background: grey;
}
#headline{
    width: 100%;
    height: 5%;
    background-color: pink;
}
#contentText{
    display: flex;
    width: 100%;
    height: 95%;
    background: red;
}
#left{
    width: 50%;
    height: 100%;
    background: red;
}
#right{
    width: 50%;
    height: 100%;
    background: yellow;
}