Fixed letters in a column

Issue

https://photos.app.goo.gl/ExJFK7Ds9a67GpCA7

--- My code:

html:

 <section class="s2">
    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>

    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>

    <div class="box"> 
        <div class="one"> <a href="#">Solitaire</a> </div>
        <div class="two"> <p>Tacori Blooms perfectly wrap around the center stones for a seamless blanket of diamonds.</p> </div>
        <div class="three"> <img src="https://www.brides.com/thmb/4PCnLR-h1HZuGHEP0AFkF0o8EiM=/1190x1190/smart/filters:no_upscale()/sq-b609e1c6078c460abc25857ae151bf2e.jpg"> </div>
    </div>
</section>

CSS

.s2{
height: 50vh;
color:rgb(0, 0, 0);
background-color: rgb(231, 226, 226);
display: grid;
justify-items:center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
line-height: 20px;
}

.box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
width: fit-content;
}

.box a{
text-decoration: none;
font-size: 30px;
margin-bottom: 20px;
}

.box img{
height: 150px;
margin: 20px auto;
border: 1px black solid;
border-radius: 20px 20px;
}

---

As you can see, I have three lines in a column: <h1, <p and <img. when I reduce the text in

or delete all the text in <p, the <h1 and <img lines no longer align with the adjacent column. Please show me how to get them aligned.

Solution

You could set the display to grid to maintain the height like so below...

.box {
display: grid;
grid-template-rows: 40px 40px 1fr;
}

Answered By - Micah Johnson