JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<body>
<menu>
<li>Menu 1</li>
<li>Menu 2</li>
<li class="adressbar">
<input type="text" value="Etwas Text"/>
</li>
<li>Auswahl</li>
</menu>
<div id="content">
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
<p>Viel Text</p>
</div>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body, menu {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
width: 100%;
}
body {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
}
menu {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
margin: 0;
padding: 0.5em 0;
background-color: #eef;
list-style-type: none;
}
menu li {
padding: 0 0.5em;
}
menu li.adressbar {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
}
menu .adressbar input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
font-size: 1em;
line-height: 1em;
}
#content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
background-color: #efe;
overflow: auto;
min-height: 1px;
}
#content p {
margin: 1em;
}