Цена товара и кнопка покупки смещены в зависимости от размера названия товара

Question

Я создал простую страницу продукта, однако блок div, содержащий цену продукта и кнопку покупки продукта, смещен в зависимости от того, сколько строк занимает название продукта.

As you can see in the screenshot above, the second product in the row is slightly misaligned because the product names only wraps two lines.

   {{product.title | escape}}  {% if section.settings.show_grid_type%} {{product.type}}  {% endif%} {%, если product.price_max == 0 и settings.custom_price0_text! = blank%} {% if product.price_varies%} {{'products.product.price_from' | t}} {% endif%} {{product.price | money}}     {% if on_sale%} {{product.compare_at_price | money}}  {% endif%} {% else%} {{settings.custom_price0_text}}  {% endunless%}  {% if section.settings.show_product_reviews_stars%}   {% endif%}   

Answer 1

Вы можете использовать сценарий соответствия высоты -> https://brm.io/jquery-match-height/ Просто включите jQuery и напишите:

$('.desc h5').matchHeight();

Или переходное отверстие CSS, которое вы решите с помощью CSS Flexbox -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/