Maintain same height in elements inside columns located side by side with CSS

Question

I have a template like this:

I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only wh

Answer 1

you may take a look at @supports to filter possible display:option or subgrid .

example with display:contents

.title {
  background: #b6fac0;
}

.content {
  background: #b6b6fa;
}

.footer {
  background: #f7f5b5;
}

.col-50 {
  border: 1px solid red;
}

@supports (display: contents) {
  .row.responsive-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
  }
  .col-50 {
    display: contents
  }
  .title {
    grid-row: 1
  }
  .content {
    grid-row: 2;
  }
  @media screen and (max-width:500px) {
    /* set the break point to the right value */
    .row.responsive-sm,
    .col-50 {
      display: block;
    }
  }
}

<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
  <div class="row responsive-sm">
    <div class="col-50">
      <div class="padding title">
        Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title </div>
      <div class="padding content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
      </div>
      <div class="padding footer">
        Footer a
      </div>
    </div>
    <div class="col-50">
      <div class="padding title">
        Title </div>
      <div class="padding content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
        in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
      </div>
      <div class="padding footer">
        Footer
      </div>
    </div>
  </div>

</ion-content>

usefull for a fast check on supports on properties: https://caniuse.com/