Having Trouble Aligning Elements Across Multiple Cards (Cannot Use Sub Grid, Separate Child Div)

Question

I've been facing a challenge with aligning the text across multiple cards. The length of the text (Title) varies, hence the elements below gets shifted down. The first is the output and the second is how my html is structured.

enter image description here

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="box">
                    <div class="img">
                        <img src="..." alt="img">
                    </div>
                    <div class="info">
                        <div class="title"><p>Title</p></div>
                        <p>description</p>
                        <div class="btn">
                            <a href="">button</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="box">
                    <div class="img">
                        <img src="..." alt="img">
                    </div>
                    <div class="info">
                        <p>Title</p>
                        <p>description</p>
                        <div class="btn">
                            <a href="">button</a>
                        </div>
                    </div>
                </div>
            </div>
    ...

I set swiper-slide's height as height: auto and .info height as height:100%;to make sure that the cards/sliders stretch to the container. So that button could be aligned.

Based on what I read, flexbox takes the height of the largest child and apply to them all. So I tried adding flex:display,flex-direction:column to .info and margin-top:auto to .btn in style.css but it didn't really change much.

I'm looking for advice on how to apply CSS to ensure consistent spacing and alignment regardless of the Title's length across the multiple cards.

Any help is appreciated!

Answer 1

You could try this one, use of Flexbox and some adjustments to your CSS like below: Now, I see it well think this is gonna help,

.swiper-container {
    display: flex;
    justify-items: center;
    align-items: center;
    height: 100%;
}

.swiper-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: end;
    text-align: center;
}

.box {
    display: flex;
    flex-direction: column;
}

.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.btn {
    margin-top: auto;
    background-color: aqua;
    border-radius: 20px;
    padding: 10px;
}

img {
    width: 300px;
}