suggestion div for autocomplete search input pushing down other elements on bottom

Question

currently i am using a mixture of tailwind css for my div and my suggestion drop down from input with a little bit of css. here is my current code

.suggestion{
  cursor: pointer;
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.suggestion:hover{
  background-color: wheat;
}

as for my react part

 <>
                <div class="flex justify-center">
                  <div class="xl:w-96">
                    <div class="input-group relative flex items-stretch w-full rounded">
                      <input 
                        type="search" 
                        class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" 
                        placeholder="Search" 
                        aria-label="Search" 
                        aria-describedby="button-addon2" 
                        onChange={e => onChangeHandler(e.target.value)} 
                            value={searchCardName} 
                            onBlur={() => {
                                setTimeout(() => {
                                setSuggestions([])
                                }, 500)
                            }}
                      />
                      <span class="input-group-text flex items-center px-3 py-1.5 text-base font-normal text-gray-700 text-center whitespace-nowrap rounded" id="basic-addon2" onClick= {() => handleClick()}>
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                          <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="max-w-sm mx-auto bg-white overflow-auto md:max-w-sm">
              {suggestions && suggestions.map((suggestions, i) => 
                <div key={i} className="suggestion" onClick={() => onSuggestHandler(suggestions)}>{suggestions}</div>
                )}
              </div>
              <Tabs />
            </>

in this case, my autocomplete search suggestion will push down my item my search bar before

after that, the suggestion div will push down my 2 tabs below here

is there any way in tailcss or normal css can help to fix this issue? i tried position: absolute and z-index also does not help in this case for css.