Genero una tabla (con vue.js) a partir de un objeto que se supone que tiene dos columnas de ancho. Cada una de las columnas proviene de la clave y el valor del objeto. Esto es equivalente al siguiente HTML real:

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Uso la cuadrícula CSS para formatear estosdiv en una cuadrícula de 2x2, que esperaba que fuera

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

El código para hacer eso:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

l resultado no es el que esperaba: los dos más profunddiv comportarse como deberían fuera de ungrid display: se apilan uno encima del otro.

Quería que heredaran el comportamiento de la cuadrícula: alinearse según las plantillas de columna a medida que avanzan. ¿Cómo lograr eso?