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
1
0
0
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
