Need the table to Overflow on the Next Row components

The search results are displayed in a table. I want the table to overflow on the next row component instead it expands pushing down the next row.

What css changes should I do? Following code is an extract. The table with search list pushes the next row of components down. Instead I want the table to on top of next row components

<div className="flex flex-wrap self-start justify-end z-2">          <form className="md:flex flex-row flex-wrap self-start lg:ml-auto mr-8">            <div className="relative flex flex-wrap self-start mt-4 mr-8">              <select                className="px-2 py-1 placeholder-blueGray-300 text-gray-300 relative bg-gray-900 rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:shadow-outline w-full pr-10"                value={tz}                onChange={(e) => {                  settz(e.target.value);                }}              >                {getTZOptions()}              </select>            </div>              <div className="relative flex flex-wrap mt-4 mr-8">              <input                type="text"                placeholder="Search Project"                className="px-2 py-1 placeholder-blueGray-300 text-gray-300 relative bg-gray-900 rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:shadow-outline w-full pr-10"                value={srchTerm}                onChange={(e) => {                  setsrchTerm(e.target.value);                  var list = exampleSrchConsts.filter((item) => {                    return item                      .toLowerCase()                      .indexOf(e.target.value.toLowerCase() > -1);                  });                  setsrchList(list);                }}              />              {srchTerm.length > 0 && (                <span                  className="h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-2 py-1"                  onClick={() => {                    //console.log(oldDisplayList);                    setsrchTerm("");                    setsrchList();                  }}                >                  <i className="fas fa-times text-red-500"></i>                </span>              )}              <table className="w:full table table-bordered bg-white ml-2">                <tbody>{srchList}</tbody>              </table>            </div>              <div className="relative flex justify-center flex-wrap self-start mt-4 mr-8 border rounded">              <i                className={                  "fas fa-th text-gray-700 px-2 py-2 border-r cursor-pointer"                }              ></i>              <i                className={"fas fa-table text-gray-700 px-2 py-2 cursor-pointer"}              ></i>            </div>          </form>        </div>  

https://stackoverflow.com/questions/67437857/need-the-table-to-overflow-on-the-next-row-components May 07, 2021 at 11:35PM