Taildwind css bottom alignment

Question

Hi, I just tried sending to the bottom of its parent:

<form class="flex flex-col w-full" (submit)="updatePhoto(title, description)">
        <div class="w-full block">
            <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Photo's Title" [value]="photo.title" #title>
        </div>
        <div class="my-4 w-full">
            <textarea rows="2" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-none" placeholder="Photo's Description" [value]="photo.description" #description></textarea>
        </div>
        <div class="grid justify-items-end  mt-auto  border ">
            <div>
                <button class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" (click)="deletePhoto(photo._id)">
                    Delete
                </button>
                <button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
                    Update
                </button>
            </div>
        </div>
 </form>

So I want to align the element (button) to the bottom of its parent, I'm using flex flex-col in the parent and child I'm using grid justify-items-end mt- auto but that didn't work so I just added border to see the location and I got this:

You can see the button has popped up, what's wrong? Why

Answer 1

Just use grid on outer container and it will work fine. There are also many opportunities to simplify markup and classes.

<script src="https://cdn.tailwindcss.com"></script>

<div class="m-4 grid max-w-4xl grid-cols-2 gap-3 rounded border p-4 shadow">
  <img class="w-full" src="https://picsum.photos/id/237/900" />
  <form class="flex flex-col" (submit)="updatePhoto(title, description)">
    <input type="text" class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none" placeholder="Photo's Title" [value]="photo.title" #title />
    <textarea rows="2" class="focus:shadow-outline w-full resize-none appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none" placeholder="Photo's Description" [value]="photo.description" #description></textarea>
    <div class="ml-auto mt-auto">
      <button class="mb-2 mr-2 rounded-lg bg-gradient-to-r from-red-400 via-red-500 to-red-600 px-5 py-2.5 text-center text-sm font-medium text-white shadow-lg shadow-red-500/50 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-red-300 dark:shadow-lg dark:shadow-red-800/80 dark:focus:ring-red-800" (click)="deletePhoto(photo._id)">Delete</button>
      <button class="mb-2 mr-2 rounded-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white shadow-lg shadow-blue-500/50 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-blue-300 dark:shadow-lg dark:shadow-blue-800/80 dark:focus:ring-blue-800">Update</button>
    </div>
  </form>
</div>