aligning multiple div headings in same height - html

Question

I'm writing an HTML page that has 3 divs in it. and each div has a heading and a para. currently, the para is getting aligned as per the heading content height. How can I make sure that the paras in all the divs start at the same position irrespective of the h2 content?
Here is my current code.
.parent{
display: flex;
}
.child{
border: 1px solid black;
margin: 1em;
padding: 1em;
}
.child h2{
border-bottom: 1px solid;
min-height: max-content;
}
<div class="parent">
<div class="child">
<h2>Proper heading with more co</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam,</p>
</div>
<div class="child">
<h2>large heading that is bigger than proper heading</h2>
<p>labore odio minima cumque molestiae amet vitae! Voluptatum</p>
</div>
<div class="child">
<h2>small</h2>
<p>
cupiditate unde vel culpa veritatis eius dicta, quia, quas dolores
similique hic! Iure.
</p>
</div>
</div>

Answer 1

if you set the height of h2 to a specific value, it will be right!
for example:
.parent{
display: flex;
}
.child{
border: 1px solid black;
margin: 1em;
padding: 1em;
}
.child h2{
border-bottom: 1px solid;
height: 60px;
}
<div class="parent">
<div class="child">
<h2>Proper heading with more co</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam,</p>
</div>
<div class="child">
<h2>large heading that is bigger than proper heading</h2>
<p>labore odio minima cumque molestiae amet vitae! Voluptatum</p>
</div>
<div class="child">
<h2>small</h2>
<p>
cupiditate unde vel culpa veritatis eius dicta, quia, quas dolores
similique hic! Iure.
</p>
</div>
</div>