Css 如何将div与不同的标题长度对齐

我有一个div，它有四个

产品

div，它们水平对齐显示

每个产品的产品名称（h3）的长度不同-它们在桌面视图中占据1、2或3行

根据行数的不同，格式设置会被取消，从而使div不再对齐

我尝试添加一个

top:0px

这样标题都从

产品的顶部开始，但是较短的H3仍然与较长H3的最后一行对齐


这是相关的CSS，尽管我不认为这里面有任何东西会导致H3错位

// Product divs

.product {
    display: inline-block;
    padding-right: 1em;
    width: 24vw;
}

.product .details {
    float: left;
    font-family: Helvetica;
}

.product img {
    height: 25vh;
    float: right;
    bottom: 0px;
}

// Details

.details h3 {
    text-transform: uppercase;
    font-size: .8em;
    font-weight: 600;
    top: 0px;
    padding-bottom: 2.5em; // even removing this line doesn't solve it
    width: 15em;
}

理想情况下，H3将在同一个位置启动，而不是现在的状态

如何修复此问题？
您可以将h3替换为一个span，然后将该span包装在其自己的div中，如下所示：

<div class="heading-wrapper">
    <span>Rare Blend Oil</span>
</div>

此绝对定位强制标题始终从左上角开始，并且使用外部包装，您还可以控制标题的宽度。
用span替换h3可以使您拥有一个内联元素，并且浏览器不会向标题添加自己的边距（与h3元素一样）。包装器类现在为您提供了对元素定位的更多控制

如果这不起作用，你也可以共享HTML吗

.heading-wrapper {
    position: relative;
}
.heading-wrapper span {
    position: absolute;
    top: 0;
    left: 0;
}