使用Tailwind CSS实现按钮固定在区块底部的问题求助

希望“Read article”按钮始终固定在每列区块的底部，无论区块内文本内容长短。目前文本内容较短的区块中，按钮位置过高，所有区块高度一致，现有代码如下：

<div class="mx-auto mt-12 grid max-w-lg md: lg:max-w-none md:grid-cols-2 lg:grid-cols-3 gap-2 lg:gap-12">
@foreach($posts as $post)
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg h-full">
<div class="flex-shrink-0">
<img class="h-64 w-full object-fit" src="{{strlen(Storage::url($post->image1)) >= 10 ? Storage::url($post->image1) : asset('storage/images/photo-coming-soon.jpg')}}" alt="">
</div>
<div class="flex flex-col justify-between bg-white p-6">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900">{!! substr($post->title, 0, 100) !!}</p>
<p class="mt-3 text-base text-gray-500">{!! substr($post->content, 0, 250) !!}</p>
</div>
<div class="flex flex-row-reverse place-self-end">
<button type="button" class="mt-5 justify-self-end inline-flex items-center rounded border border-yellow bg-yellow px-2.5 py-1.5 text-xs font-medium text-black-500 shadow-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-yellow focus:ring-offset-2">Read Article</button>
</div>
</div>
</div>
@endforeach
</div>

只需调整两处代码即可实现按钮固定在区块底部：

• 给包含文本和按钮的容器（bg-white p-6所在的<div>）添加h-full类，确保它填满父容器的剩余高度，让justify-between能正确将文本区域和按钮分别推至顶部和底部。
• 移除按钮上的mt-5类，避免额外的上边距干扰布局，justify-between已经会自动分配空间拉开文本和按钮的距离。

修改后的代码如下：

<div class="mx-auto mt-12 grid max-w-lg md: lg:max-w-none md:grid-cols-2 lg:grid-cols-3 gap-2 lg:gap-12">
@foreach($posts as $post)
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg h-full">
<div class="flex-shrink-0">
<img class="h-64 w-full object-fit" src="{{strlen(Storage::url($post->image1)) >= 10 ? Storage::url($post->image1) : asset('storage/images/photo-coming-soon.jpg')}}" alt="">
</div>
<div class="flex flex-col justify-between bg-white p-6 h-full">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900">{!! substr($post->title, 0, 100) !!}</p>
<p class="mt-3 text-base text-gray-500">{!! substr($post->content, 0, 250) !!}</p>
</div>
<div class="flex flex-row-reverse place-self-end">
<button type="button" class="justify-self-end inline-flex items-center rounded border border-yellow bg-yellow px-2.5 py-1.5 text-xs font-medium text-black-500 shadow-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-yellow focus:ring-offset-2">Read Article</button>
</div>
</div>
</div>
@endforeach
</div>

内容的提问来源于stack exchange，提问作者Benny