JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<menu>
<li>Menu 1</li>
<li>Menu 2</li>
<li class="adressbar">
<input type="text" value="Etwas Text"/>
</li>
<li>Auswahl</li>
</menu>
CSS
menu {
background-color: #eee;
padding: 0.5em 0;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-align: center;
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;
}