Css {Trying to align content of two children content with each other}

HTML-CSS
1

Hi
I am just study the Css with free code camp and from other forums.
i am having an issue unable to find the solution.
Problem is this I had a case where i have two cards side by side i am able to set the height of both children same by making parent container flex and justify-content: stretch and making the child align-self: stretch but problem is this that content of bother container is with different character size of the fig caption content thats why the alignment of the both children container content is not perfect while the hight of the both containers is same.
Sorry I am first time ever posting on any forum so I am not much aware of rules sorry for that.

2

hello and welcome to fcc forum :slight_smile:

share your attempted code, also any live demonstration of that in “repl/codepem/etc”, so that we can have more context to offer any help when possible, thanks and happy coding :slight_smile:

1 Like
3

html Code:

card1 H&M Studio Collection dark brown leather biker jacket 
                        <div class="VOGUE-Hero_SectionB-Block1_ShopinCards-card1_Price">
                            <a href="#H&M">$ 499</a>
                             <a href="#H&M">H & M</a>
                        </div>
                    </div>
            
                        <div class="VOGUE-Hero_SectionB-Block1_ShopinCards-card2">
                            <div class="VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Picture">
                                <figure>
                                    <img src="./assets/sCard2.jpeg.webp" alt="card2">
                                    <figcaption>Eaves Gia leather moto jacket</figcaption>
                                </figure>
                                <p></p>
                            </div>
                            <div class="VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Price">
                                <a href="#H&M">$ 528</a>
                                 <a href="#H&M">REVOLVE</a>
                            </div>
                    </div>

css

.VOGUE-Hero_SectionB-Block1_ShopinCards{
display: flex;
justify-content: stretch;
align-items: center;
flex-wrap: wrap;
/* padding: 0.5rem; */

border: 1px solid black;

}
.VOGUE-Hero_SectionB-Block1_ShopinCards-card1,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card2,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card3,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card4,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card5,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card6,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card7,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card8{
width: 45%;
/* height: 8rem; */
border: 1px solid black;

margin: 1rem;
padding: 0.5rem;

align-self: stretch;

display: flex;
justify-content: stretch;
align-items: center;
flex-direction: column;

align-self: stretch;

}
.VOGUE-Hero_SectionB-Block1_ShopinCards-card1_Picture figcaption,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Picture figcaption{
line-height: 1.6rem;
letter-spacing: 0.25rem;
}
.VOGUE-Hero_SectionB-Block1_ShopinCards-card1_Price,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Price{
margin-top: 0.5rem;
width: 100%;

border: 1px solid black;

}
.VOGUE-Hero_SectionB-Block1_ShopinCards-card1_Price:hover,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Price:hover{
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-weight: 800;
}
.VOGUE-Hero_SectionB-Block1_ShopinCards-card1_Price a,
.VOGUE-Hero_SectionB-Block1_ShopinCards-card2_Price a{
display: block;
}

Problem:
the basic both containers height is same
but problem is this that the content of the figcaption of both container holds different number of characters thats why the height of that figcaption is caussing my price container to down and up on both sides
I

4

if i add 2rem top margin to the second card price div the problem solved but is their any way it can be auto adjusted or not.

5

looking for better and experienced approach from more experienced seniors

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.