Is there a way to give same size to content inside flex-items

I have a flex container. And inside different div's having h1, p, span children. And I want to set size of h1 to be same for all div's Here you see the sizes of h1 is according to there text length. All I want is that line below h1 are at same level

This is my HTML

<div class="container">
    <div class="item">
        <h1>Lorem, ipsum.</h1>
        <hr>
        <p>Lorem, ipsum dolor.</p>
        <hr>
        <span>Lorem, ipsum dolor.</span>
    </div>
</div>

This is my CSS

.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    max-width: 400px;
    border: 1px solid white;
    margin: 3px;
}

Is there a way from which I can solve this by flex. Or otherwise is there any other option.