Html 对齐引导行中元素的列内容以匹配该行的最大元素

我想将下面的产品对齐，以便将每个图像、标题、价格和库存价值对齐到该行其他产品的相同位置

这就是现在的样子。

这就是我的目标

目前，因为我使用的是引导行/列，所以它适合于内容，并且一些产品比其他产品小

理想情况下，图像将基于最大图像垂直居中。所有其他元素都将从该行最低点的相同位置开始

我有一个JSFIDLE，所以你可以看到它现在是什么样子

有什么建议吗？还是向正确的方向推进

我想我可以把这些图像填充起来。但我相信有更好的解决办法

这就是它目前的设置方式

<div id="products" class="row">
    <div class="col-xl-3 col-lg-4 col-md-6 text-center" id="637338721-6">
    <img class="image-thumbnail justify-content-center" src="http://dummyimage.com/115x162.bmp/cc0000/ffffff" alt="Card image">
    <div class="h5">Bread Foccacia Whole</div>
    <div class="p3"> Price: £99.92</div>
    <small class="card-text pt-n3">In Stock</small>
    ###MORE ROWS HERE 
</div>

全麦面包
价格：99.92英镑
有现货的
###这里有更多的行