How To Align Divs With Varying Title Lengths - css

Question

I have a div that has four product divs that display horizontally aligned with each other.
The length of the product titles (h3) is different among each product - they either take up 1, 2 or 3 lines in desktop view.
Depending on the number of lines, the formatting is thrown off so that the divs are no longer aligned.
I tried adding a top: 0px; so that the headers all started right at the top of the product div, but the shorter h3s are still aligning with the last line of the longer h3s.
Here's the relevant CSS, though I don't think there's anything in this that causes the misaligned h3s.
// 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;
}
Ideally, the h3s would all start in the same place instead of how they are now.
How could I fix this?

Answer 1

You could replace the h3 with a span and then wrap that span in its own div like so:
<div class="heading-wrapper">
<span>Rare Blend Oil</span>
</div>
Copy over all the styles you have for the h3 to the span.
Then you could try to style it this way:
.heading-wrapper {
position: relative;
}
.heading-wrapper span {
position: absolute;
top: 0;
left: 0;
}
This absolute positioning forces the heading to always start at the top left corner, and with the outer wrapper, you can also control the width of the heading.
Replacing the h3 with a span allows you to have an inline element and the browser does not add its own margins to the heading (as it does with the h3 element.) The wrapper class now gives you more control over the positioning of the element.
Can you also share the HTML if this doesn't work?