Querido: una solución única de CSS para habilitar MULTIPLE "secciones" de cuadrícula de igual altura por fila, que también responde.

Nota: esta es una pregunta de seguimiento paraesta pregunta que tiene una sola sección de "igual altura" por elemento, que se puede lograr a través de flexbox

El siguiente diagrama debería ayudar a explicar el requisito:

La "cuadrícula de elementos" debe responder, ya que puede mostrar un número diferente de tarjetas por fila en función del ancho de la ventana gráfica (4 en el escritorio, 2 en el móvil). Dentro de una fila dada, las secciones equivalentes de "contenido" y "función" deben tener la misma altura.

En el siguiente HTML y CSS: las tarjetas de elementos se dividen en las filas que necesitamos (en los dos puntos de corte de escritorio y móviles), pero las alturas de las secciones de contenido son variables:

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__features {
  padding: 10px;
  border-top: 1px solid #bbbbbb;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
  background-color: #f7cbb1;
}

.item__features ul {
  margin: 0px;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>


  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section as it spans many more lines than the rest of the other content sections on this row
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>                         <li>feature 2</li>
        <li>feature 3</li>
      </ul>
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
      </ul>
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__features">
      <ul>
        <li>feature 1</li>
        <li>feature 2</li>
      </ul>
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

Creé el siguiente codepen como una solución basada en JavaScript que logra el resultado deseado, pero espero reemplazar esto con solo una solución CSS si es posible:http://codepen.io/rusta/pen/xdmdxm

Limitaciones

El número de elementos que se mostrarán en la lista de cuadrícula puede ser cualquier número de 1-nEl tamaño de las secciones de "contenido" y "características" que se mostrarán será realmente variable (por lo que elegir una altura mínima "sensible" no es una opción)

Las soluciones basadas en Flexbox parecen no poder hacer frente al hecho de que los elementos tienen más de una sección que necesita alinearse

Tenía la esperanza de que el nuevo sistema CSS Grid ayudaría a lograr lo anterior, pero he intentado esto sin suerte, así que estoy abriendo la comunidad para ver si me falta algo

Nota adicional: digo una solución única de CSS, con lo que me refiero a una solución que no es JS. Si los bloques HTML necesitan cambiar (orden / anidación / nombres de clase) para admitir una solución que no sea JS, esa es una opción viable