JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headerSearch" id="headerSearch">

            <div class="entireSearchContainer" id="entireSearchContainer">

                <form id="searchForm" name="example" action="https://example.com/" method="GET">

                    <div class="searchBar autocompleteActive" id="searchBar">

                        <div class="searchBarInner">

                            <input class="searchBox" id="searchBox" type="text" name="q" placeholder="" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" required="">

                        </div>

                        <div class="autocompleteContainerSearch" id="autocompleteContainer" style="display: block;"> </div>                    
                    </div>

          
                                    
                </form>
            
            </div>         
</div>

CSS

.headerSearch {
border-top: 1px solid #252525;
border-bottom: 3px solid #252525;
background: #252525;
position: relative;
width: 100%;
z-index: 777;
}

.entireSearchContainer {
margin-left: 156.44px;
}

.entireSearchContainer .searchBar {
display: block;
float: left;
width: 662px;
margin-top: 22.82px;
height: 46.978px;
background-color: #fff;
box-sizing: border-box;
}

.entireSearchContainer .searchBar .searchBarInner {
display: inline-flex;
display: -webkit-inline-flex;
width: 100%;
height: 48px;
}

.entireSearchContainer .searchBar .searchBox {
flex: 1;
padding: 17.944px;
}

.autocompleteContainerSearch {
z-index: 1110;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
overflow-x: hidden;
flex: 1;
max-width: 662px;
height: 30px;
width: 100%;
margin-top: -1px;
position: absolute !important;
border: 1px solid #000;
display: block;
padding-bottom: 6.854px;
}