JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div id="d1"></div><!--
    --><div id="d2"></div><!--
    --><div id="d3"></div><!--
    --><div id="d4"><input type="text" />
    <button>ok</button>
    </div><!--
--></nav>

CSS

nav
{
    background-color: #0ff;
    width:100%;
}
div
{
    float: left;
    height: 100px;
    width: 100px;
}
#d1
{
    background-color: #69f;
}
#d2
{
    background-color: #79f;
}
#d3
{
    background-color: #89f;
}
#d4
{
    background-color: #99f;
    width: calc(100% - 300px);
}
input[type="text"]
{
    width: calc(100% - 100px);
}
button
{
    width:90px;
}