Product Rows - same height using CSS

Hi! 

I'm building a client site and am trying to get the height of each item in a row to be the same, so when the "sale" flag is active, it will appear at the same level as other's in the row that may also be on sale. 

URL to check out: https://burlybottomdesigns.squarespace.com/shop/cum-rags-towels/cum-rags and you can see how the title lengths vary and it makes it look a bit discombobulated. 

I have been trying to figure out what to change, and haven't come across a solution yet so I thought I'd ask here for help since I love this as a resource. 

@Atwookie Hi! The URL you shared isn’t working—it seems to be broken. Can you share another link where the issue is happening?

Hi Lesum! Sorry about that, forgot to add the shop slug. I've edited the URL in the original post, but it is in this reply as well. - C

https://burlybottomdesigns.squarespace.com/shop/cum-rags-towels/cum-rags

@Atwookie Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to address the issue:

@media screen and (min-width: 768px) {
  .products.collection-content-wrapper .grid-item-link.product-lists-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  .products.collection-content-wrapper .grid-item .grid-image {
     flex-shrink: 0 !important;
   }
   .tweak-products-text-alignment-middle .products.collection-content-wrapper .grid-meta-wrapper {
     flex-grow: 1 !important;
   }
}