How to do a responsive text in label with tailwind css

Question

Today I add a text in my password label, but when I change de resolution the text don't stay in the same place, please help me. My code:

     <div class="flex">
       <BreezeLabel for="password" value="Password" /> 
          <Link
            :href="route('password.request')"
            class="text-sm text-purple-600 hover:text-purple-800 ml-48"
          >
            Forgot your password?
          </Link>
       </div>

Some omg to ilustrasse the situation:
fullsize
md
sm

Answer 1

I don't know how Breeze works.

But I think you could use flex in your favor.

If you want the link always on the right side, you can use something like this,

<div class="flex justify-between">
  <BreezeLabel for="password" value="Password" /> 
  <Link
    :href="route('password.request')" 
    class="text-sm text-purple-600 hover:text-purple-800"
  >Forgot your password?</Link>
</div>

You can check here if this is what you need: https://play.tailwindcss.com/CXsdrXwDDq.