I’m trying to display the products with the same height at the shop page. I want the product image aligned at the top and the add to cart buttons aligned at the bottom.

What I have right naw:

What I’ve tried so far:

• Using javascript to set the <li> hight equal to it’s parent <ul> hight. The result is the following:
  

The js code is the following:

 //Script to align the products in shop page
    $(document).ready(function() {
        var max = 0; 
        max = $("ul.products").height();
        $("ul.products li.product").height(max);


    });

This works as desired, the only problem is that I can’t get the prices and buttons closer to the text.

• Applying a fixed height to the li elements.
  This breaks the responsive.

It must be an easy solution for that! Any help will be highly appreciated.