Having some trouble with aligning items in a div using align-items-stretch to stretch the background and align-items-center to vertically center the content. It seems that the alignment issue occurs when there's a very long title present.
https://i.stack.imgur.com/kfLx8.png The 'Devote' should be centered vertically along with the other card
https://i.stack.imgur.com/dQqmB.png The desired outcome is to align the images at the same height vertically
What could I be doing incorrectly?
Update: Included CSS from personal style + additional bootstrap styles Update: Adding inline min-height centers the content vertically (which works well).
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters align-items-center">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
<div class="col-12 ">
<span class="brand"> Brand name </span>
<h3> Short title </h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters align-items-center">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
<div class="col-12 ">
<span class="brand"> Brand name </span>
<h3> This is a very long title which stretches the div </h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.tile-product-content-horizontal {
padding: 20px 40px 20px 5px;
}
.tile {
border-radius: 16px;
background-color: #FFF;
margin-bottom: 20px;
background-image: url(assets/card-chevron.png);
background-repeat: no-repeat;
background-position: right 30px center;
}
/* BOOTSTRAP SPECIFIC */
.align-items-stretch {
align-items:stretch !important
}
.align-items-center {
align-items:center !important
}
.d-flex {
display:flex !important
}