How to move an Div to the bottom right side of an Image

Question

So I have an Image card that I want to place an element to the bottom right of the image.

I'm using the TailwindCss aspect ratio plugin.

That Close X needs to be moved to the bottom-right side of the Image.

<div class="mt-5 grid grid-cols-2 gap-3 px-3">
      <div class="aspect-w-3 aspect-h-4">
        <image
          src="http://unsplash.it/500/500?random&gravity=center"
          alt="Profile Image"
          class="rounded-md"
          layout="fill"
        />
        <div class="absolute bottom-2 right-0 text-white">X</div>
      </div>
    </div>

This is a Codesandbox demonstrating the problem

Answer 1

Since the TailwindCss aspect ratio plugin uses padding and 0 height, position absolute will not work as intended. So we can use flex to our advantage.

<div class="mt-5 grid grid-cols-2 gap-3 px-3">
  <div class="flex aspect-w-3 aspect-h-4">
    <image
      src="http://unsplash.it/500/500?random&gravity=center"
      alt="Profile Image"
      class="rounded-md"
      layout="fill"
    />
    <div class="flex items-end justify-end p-5 text-white">X</div>
  </div>
</div>

Working Solution: https://codesandbox.io/s/morning-morning-ggr841?file=/public/index.html