Css - fixed menu in tailwind not displaying well?

this is a simple dashboard in tailwind, the preview can be seen https://play.tailwindcss.com/zagBiwZRbK

<div class="flex w-full bg-white">
  <sidebar class="flex h-screen w-64 flex-col justify-between rounded-md transition duration-150 ease-in-out">
    <div class="grow bg-white">
      <div class="flex items-center justify-between px-2 py-5">
        <div class="mr-5 flex items-center">
          <div class="mr-5">
            <div class="relative inline-block shrink-0 cursor-pointer rounded-[.95rem]"></div>
          </div>
          <div class="mr-2"><a href="javascript:void(0)" class="dark:hover:text-primary hover:text-primary text-secondary-inverse text-[1.075rem] font-medium transition-colors duration-200 ease-in-out dark:text-neutral-400/90" target="_blank">sidebar</a><span class="text-secondary-dark block text-[0.85rem] font-medium dark:text-stone-500"></span></div>
        </div>
      </div>
      <div class="w-56 px-2">
        <div class="my-2 rounded-lg bg-[#dce3ef40]"></div>
      </div>
    </div>
  </sidebar>

  <div class="flex h-full h-screen w-full flex-col border-l border-gray-200 bg-gray-100">
    <nav class="fixed w-full border-b bg-white/30 px-16 py-4 backdrop-blur-sm">
      <div class="flex items-center justify-between" style="">
        <h2 class="font-semibold text-slate-900">dataset</h2>
        <div class="flex space-x-4">
          <div class="dark:highlight-white/10 group relative rounded-md dark:bg-slate-700 dark:focus-within:bg-transparent">
            <input type="text" aria-label="Filter" placeholder="Filter..." class="w-full appearance-none rounded-md bg-transparent py-2 pl-10 text-sm leading-6 text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-2" />
          </div>
          <div class="flex space-x-5">
            <a class="group flex items-center rounded-md bg-blue-500 py-2 pl-2 pr-3 text-sm font-medium text-white shadow-sm hover:bg-blue-400"
              > Add</a
            >
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

the problem in this code is in the header of main container (a fixed menu), the filter input and add button is partially hidden as shown below. if the header is not fixed, then it will show normally again.

if I remove the tag, the filter input and button can display in the right way.

how would I fix it when sidebar and main are both in the container, the header in the main container has to be fixed position.