I know this has been asked in this forum many times, but I read every topic about it and tried many suggested solutions and still, I'm not able to make it work for my own case.
Here's this case. I have this grid of content cards, but depending on the length of the content or whether or not every element in the card is used, the card has a different height. So, elements are not aligned from one card to another. I'd like to edit my code so the top of each element starts at a relative height so they are aligned.
Codepen: https://codepen.io/louischausse/pen/VRQxgB
I'd like that top of each child div align with each other
Thanks for your help
.section__etudes-card > span, [gr-grid~=row--block], .section__featured-article .hs_cos_wrapper .widget-module ul {
position: relative;
display: -ms-flexbox;
-js-display: flex;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-left: -15px;
margin-right: -15px;
align-items: stretch;}
.section__etudes-card > span > div, [gr-grid=block], .section__featured-article .hs_cos_wrapper .widget-module ul li {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-top: 30px; }
.section__etudes-card {
margin-top: 1.875rem;
margin-bottom: 1.875rem; }
.section__etudes-card > span > div {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
@media (min-width: 48em) {
.section__etudes-card > span > div {
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
max-width: 33%; } }
@media (min-width: 64em) {
.section__etudes-card > span > div {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; } }
.section__etudes-card > span > div:empty {
display: none; }
.etude-card {
display: block;
text-align: center;
margin-bottom: 0.9375rem;
text-decoration: none; }
@media (min-width: 64em) {
.etude-card:hover [class*="btn--"] {
/*transform: scale(1.05);*/
color: #fff;
background-color: #e98815;
border-color: #e98815; } }
.etude-card .etude-card__title {
margin-top: 0.9375rem;
margin-bottom: 0.9375rem;
font-weight: bold;
color: #333333;
line-height: 1.1; }
.etude-card .etude-card__date {
font-size: 0.8125em;
margin-top: 0.625rem;
margin-bottom: 0.625rem; }
.etude-card .etude-card__ufc {
color: #FFFFFF;
font-size: .75em;
padding: 3px 8px;
background-color: #e98815;
width: 75px;
margin: 0 auto;
border: 1px solid #e98815;}
.etude-card .etude-card__cost {
color: #e98815;
font-size: .75em;
padding: 3px 8px;
width: 75px;
margin: 0 auto;
border: 1px solid #e98815;}
.etude-card [class*="btn--"] {
padding-left: .5em;
padding-right: .5em;
text-transform: none; }
.etude-card img {
width: 100%;
max-width: 215px;
margin-left: auto;
margin-right: auto; }
.etude-card__ufc:empty {
display: none; }
.etude-card__cost:empty {
display: none; }
.btn--primary {
padding: 10px 35px;
font-size: 16px;
border-radius: 5px;
display: inline-block;
position: relative;
z-index: 0;
text-decoration: none;
text-transform: none !important;
color: #FFFFFF;
background-color: #e98815;
border: 2px solid transparent;
}
.btn--primary:hover {
background: #ffffff !important;
color: #e98815 !important;
border: 2px solid #e98815 !important;
}<section class="section__etudes-card">
<span id="hs_cos_wrapper_Ressource_center_element" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_widget_1552502647360" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS IS EVENT TITLE
</div>
<div class="etude-card__ufc">TAG 1</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
<div id="hs_cos_wrapper_widget_1552496573108" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS A VERY MUCH LONGER EVENT TITLE CAUSING PROBLEMS
</div>
<div class="etude-card__ufc">TAG 1</div>
<div class="etude-card__cost">TAG 2</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
<div id="hs_cos_wrapper_widget_1551887999614" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888011972" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><!-- custom widget definition not found --></div>
<div id="hs_cos_wrapper_widget_1551888047237" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<a href="https://codepen.io/" class="etude-card">
<img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/>
<div class="etude-card__title">
THIS IS EVENT TITLE
</div>
<div class="etude-card__cost">TAG 2</div>
<div class="etude-card__date">
Place
</div>
<div class="etude-card__date">
Time
</div>
<span class="btn--primary">
See details
</span>
</a>
</div>
</section> 
