Is there a way to make these cards uniform in size and width? Whenever I add more text to a product on a card, the body shifts down while the edges of the card stay the same. I want the body to stay aligned regardless of the content. Is this possible?
<div class="card-body">
<div class="product-name col-12 no-padding">
<a
class="unset"
:title="product.name"
:href="`${baseUrl}/${product.slug}`">
<span class="fs16">{{ product.name.substring(0,20) }} <br> {{ product.name.substring(21,40) }} <br> {{ product.name.substring(41,60) }} <br> {{ product.name.substring(61,81) }} </span>
</a>
</div>
<div class="sticker new" v-if="product.new">
{{ product.new }}
</div>
<div class="product-price fs16" v-html="product.priceHTML"></div>
<div
class="product-rating col-12 no-padding"
v-if="product.totalReviews && product.totalReviews > 0">
<star-ratings :ratings="product.avgRating"></star-ratings>
<a class="fs14 align-top unset active-hover" :href="`${$root.baseUrl}/reviews/${product.slug}`">
{{ __('products.reviews-count', {'totalReviews': product.totalReviews}) }}
</a>
</div>
<div class="product-rating col-12 no-padding" v-else>
<span class="fs14" v-text="product.firstReviewText"></span>
</div>
<vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
</div>
</div>