This is my first question at this forum. I have problem with my code (or I just don't know that it's impossible to do). So it's what it looks like now: Look
.products {
width: 100%;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.products__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 45%;
flex: 0 0 45%;
margin-top: 1rem;
background-color: whitesmoke;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.products__image {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
background-color: orange;
}
.products__image img {
width: 100%;
height: 150px;
-o-object-fit: contain;
object-fit: contain;
}
.products__header {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
font-size: 1.5rem;
font-family: "Cormorant Garamond", serif;
text-align: center;
background-color: rebeccapurple;
}
.products__header p {
padding: 1rem 0.5rem 1rem 0.5rem;
}
.products__button {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
padding: 1rem 0.5rem 1rem 0.5rem;
text-align: center;
font-family: "Lato", sans-serif;
font-family: 1rem;
background-color: red;
}
.products__button p {
border: 0.1rem solid #1a1a1a;
padding: 0.5rem 0.25rem 0.5rem 0.25rem;
} <products>
<section class="products">
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1 TEA TYPE #1 TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now longer than ever f f f f</p>
</div>
</div>
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now</p>
</div>
</div>
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now</p>
</div>
</div>
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1 TEA TYPE #1 TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now</p>
</div>
</div>
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now</p>
</div>
</div>
<div class="products__item">
<div class="products__image"><img src="img/product/type1.png"></div>
<div class="products__header">
<p>TEA TYPE #1</p>
</div>
<div class="products__button">
<p>Shop Now</p>
</div>
</div>
</section>
</products>I would like to make it look equal. let's check the first rown of given code. The purple on the left should be the same height as purple on the right. The same with red.
