Поддерживать одинаковую высоту в элементах внутри столбцов, расположенных рядом с CSS

Question

У меня есть такой шаблон:

Я хочу поддерживать одинаковую высоту между каждым элементом обоих столбцов, в зависимости от того, который имеет наибольшую высоту, но только тогда, когда они рядом. На меньших экранах, когда они имеют ширину: 100%, каждый div имеет собственную высоту в зависимости от высоты своего содержимого.

Это должно выглядеть следующим образом:

Я думаю, что мне нужно что-то вроде display: table, но мне нужно, чтобы оба столбца были отзывчивыми.

Все вопросы, которые я нашел, касаются поддержания одинаковой высоты в обоих столбцах, но я уже использую flexbox для достижения этой цели.

Можно ли достичь того, чего я хочу с * Только 1035 *?

РЕДАКТИРОВАТЬ: Добавлен фрагмент кода. Я забыл упомянуть, что он должен поддерживаться Chrome 36 (Android L WebView).

Первый ответ на этот вопрос показывает, чего я хотел достичь, но display:subgrid в настоящее время не поддерживается ни одной версией Chrome: Выравнивание дочерних элементов различных блоков

.title {
  background: #b6fac0;
}

.content {
  background: #b6b6fa;
}

.footer {
  background: #f7f5b5;
}

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

<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
    </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>

Answer 1

вы можете взглянуть на @supports, чтобы отфильтровать возможное отображение: опция или subgrid.

пример с 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>

полезно для быстрой проверки опор по свойствам: https://caniuse.com/