I’m working on a layout using Tailwind CSS where an input field expands its width on focus. However, when the input field expands, part of it goes off-screen during the transition, though it looks fine after completing the transition. I’m looking to make the transition smooth without causing the input to go off-screen. Here’s the relevant part of the code:

<div class="flex justify-between">
  <span>Hello</span>
  <div class="flex gap-2">
      <div class="sm:mr-auto">
        <div class="relative">
          <input
            type="text"
            class="w-full rounded-md border border-slate-300/70 bg-white px-9 py-2 text-sm font-semibold text-black !outline-none transition-all duration-1000 ease-out placeholder:tracking-widest focus:w-96 focus:border-primary focus:ring-transparent sm:bg-transparent sm:pr-4"
            placeholder="Search..."
          />
        </div>
      </div>
    </div>
</div>

Live demo available here: Tailwind Play

How can I modify the CSS so that the input field remains visible and properly positioned within the screen bounds during its transition? Are there best practices with Tailwind CSS for managing expanding elements in a flex container?