Div below input type text shifts up and down as the input text changes in Safari

I have an input type="text" and a div underneath it. When the input type="text" changes from having text in it to being empty, the div underneath it shifts up and down a few pixels. This problem only happens in Safari.

Is a webkit CSS property that’s part of Safari causing this problem? I can’t figure out why it’s happening.

Here is my code, the JSFiddle, and a video of the problem.

In the video, note the black box that moves up and down a few pixels is the div with (class="autocompleteContainerSearch") which is underneath the textbox with (class="searchBox").

Black box moves up and down a few pixels when input text box changes

https://jsfiddle.net/ea2knx30/

.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;
}
<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>

>Solution :

This is how I wrote it and the problem seems to be resolved.

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