在 Tailwind CSS 中，justify-self-end 在 Firefox 中不起作用

Question

I am using Tailwind CSS and I have a problem with justify-self-end . It works in Chrome, but not in Firefox. I have uploaded two pictures so to understand better what's happening. Is there something I can do to make it work in both browsers?

<section class="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:h-screen overflow-hidden">
  <div class="justify-self-end bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/alarm.webp"
      class="alarm cursor-pointer shadow-lg rounded-[1em] lg:rounded-l-full max-w-full h-[90%]"
    />
  </div>
  <div class="bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/camera.webp"
      class="camera cursor-pointer shadow-lg rounded-[1em] lg:rounded-r-full max-w-full h-[90%]"
    />
  </div>
</section>

Firefox

Chrome

Answer 1

I think this will work for you:

<section class="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:h-screen overflow-hidden">
  <div class="flex justify-end bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/alarm.webp"
      class="alarm cursor-pointer shadow-lg rounded-[1em] lg:rounded-l-full max-w-full h-[90%]"
    />
  </div>
  <div class="bg-[#2e3362] px-[1em] lg:px-[0] mb-[1.875em] lg:mb-0">
    <img
      src="../img/camera.webp"
      class="camera cursor-pointer shadow-lg rounded-[1em] lg:rounded-r-full max-w-full h-[90%]"
    />
  </div>
</section>

I added flex and justify-end to the first div.

Hope it helps.