title: how to align elements from within two different cards
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Codepen: <a href="https://codepen.io/louischausse/pen/VRQxgB" rel="nofollow noreferrer">https://codepen.io/louischausse/pen/VRQxgB</a></p>
  
  <p>I'd like that top of each child div align with each other</p>
  
  <p>Thanks for your help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section__etudes-card &gt; 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 &gt; span &gt; 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 &gt; span &gt; div {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
      max-width: 50%; }
      @media (min-width: 48em) {
        .section__etudes-card &gt; span &gt; div {
          -ms-flex-preferred-size: 33%;
              flex-basis: 33%;
          max-width: 33%; } }
      @media (min-width: 64em) {
        .section__etudes-card &gt; span &gt; div {
          -ms-flex-preferred-size: 25%;
              flex-basis: 25%;
          max-width: 25%; } }
      .section__etudes-card &gt; span &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section__etudes-card"&gt;
          &lt;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"&gt;&lt;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"&gt;
      &lt;a href="https://codepen.io/" class="etude-card"&gt;
          
              &lt;img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/&gt;
          
          &lt;div class="etude-card__title"&gt;
              THIS IS EVENT TITLE
          &lt;/div&gt;
          &lt;div class="etude-card__ufc"&gt;TAG 1&lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Place
          &lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Time
          &lt;/div&gt;
          &lt;span class="btn--primary"&gt;
              See details
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;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"&gt;
      &lt;a href="https://codepen.io/" class="etude-card"&gt;
          
              &lt;img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/&gt;
          
          &lt;div class="etude-card__title"&gt;
              THIS A VERY MUCH LONGER EVENT TITLE CAUSING PROBLEMS
          &lt;/div&gt;
          &lt;div class="etude-card__ufc"&gt;TAG 1&lt;/div&gt;
          &lt;div class="etude-card__cost"&gt;TAG 2&lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Place
          &lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Time
          &lt;/div&gt;
          &lt;span class="btn--primary"&gt;
              See details
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;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"&gt;&lt;!-- custom widget definition not found --&gt;&lt;/div&gt;
  &lt;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"&gt;&lt;!-- custom widget definition not found --&gt;&lt;/div&gt;
  &lt;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"&gt;
      &lt;a href="https://codepen.io/" class="etude-card"&gt;
          
              &lt;img src="https://i.ibb.co/34S4L8B/image-placeholder.jpg" alt="image-placeholder"/&gt;
          
          &lt;div class="etude-card__title"&gt;
              THIS IS EVENT TITLE
          &lt;/div&gt;
          &lt;div class="etude-card__cost"&gt;TAG 2&lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Place
          &lt;/div&gt;
          &lt;div class="etude-card__date"&gt;
              Time
          &lt;/div&gt;
          &lt;span class="btn--primary"&gt;
              See details
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/section&gt; </code></pre>
  </div>
  </div>
  </p>