Fix search input below navigation items with TailwindCSS

Question

Currently having a struggle getting the search input to position below the navigation items on the hamburger menu, either it works and breaks the position on desktop or it doesn't work at all and sits to the right

How it looks currently

Navbar code:

    <nav
        class="flex items-center justify-between flex-wrap bg-gray-900 py-4 lg:px-12 shadow border-solid border-t-2 border-gradi border-gradient-purple">
  <div class="flex justify-between lg:w-auto w-full lg:border-b-0 pl-6 pr-2 border-solid border-b-1 border-gray-800 lg:pb-0">
      <div class="flex items-center flex-shrink-0 text-white mr-16">
          <span class="font-semibold text-xl tracking-tight">Site</span>
      </div>
      <div @click="showMenu = !showMenu" class="block lg:hidden ">
          <button
              id="nav"
              class="flex items-center px-3 py-2 text-white hover:text-blue-700">
              <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title>
                  <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
              </svg>
          </button>
      </div>
  </div>

  <div :class="showMenu ? 'flex' : 'hidden'" class="menu w-full lg:flex lg:items-center lg:w-auto lg:px-3 px-8">
      <div class="text-md font-bold lg:flex-grow">
          <router-link to="/" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded mr-2">Home</router-link>
          <router-link to="/favourites" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded mr-2">Favourites</router-link>
          <router-link to="/history" class="block mt-4 lg:inline-block lg:mt-0 hover:text-white px-4 py-2 rounded mr-2">History</router-link>
      </div>
      <div class="bottom-0 inset-x-0 block mt-4 lg:inline-block lg:mt-0 px-4 py-2 rounded mr-2 right-0"> 
        <form class="flex items-center">   
          <label for="simple-search" class="sr-only">Search</label>
          <div class="relative">
              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                  <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
              </div>
              <input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
          </div>
          <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
        </form>
      </div>
  </div>
</nav>