JSFiddle - React, Tailwind, and code Playground
HTML
<div class="navbar-form navbar-left">
<div id="searchResults">So much results...</div>
<input class="form-control" placeholder="Search..." type="text" autocomplete="off" id="autocomplete_search" />
</div>
CSS
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; */
box-sizing: border-box;
}
.navbar-form
{
position: relative;
/* just a little demo */
margin-left:200px;
}
.form-control
{
width: 100%;
}
#searchResults
{
position: absolute;
width: auto;
background: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 200px;
overflow-y: auto;
border: 1px solid gray;
/*This is relative to the navbar now*/
left: 0;
right: 0;
top: 20px;
}