Search code examples
vertical-alignmenttailwind-css

in TailwindCss how put buttons at bottom of wide-by-side divs with different content heights

The Tailwindcss code below does a nice job of creating same-height cards.

How do I get all 3 buttons to align to the bottom of each card?

I expected adding "bottom-0" to the div holding the buttons would work, but I think the issue is "bottom" is relative it its parent, which is not the full height of the card.

enter image description here

quick playground: https://play.tailwindcss.com/SX4Yu2OT3f

    .p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"
      / Card 2
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 2
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, 
        .px-6.pt-4.pb-2.text-center
          = link_to "try it!", "#", class: "btn btn-small btn-primary"
      / Card 3
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 3
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. 

        .px-6.pt-4.pb-2.text-right
          = link_to "find it", "#", class: "btn btn-small btn-secondary"
Solution

  • Give a flex flex-col classes to your card and mt-auto to button wrapper

    .p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white.flex.flex-col
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left.mt-auto
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"