Giro uma tabela (com vue.js) a partir de um objeto que deveria ter duas colunas de largura. Cada uma das colunas vem da chave e do valor do objeto. Isso é equivalente ao seguinte 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>

Eu uso a grade CSS para formatar essesdiv em uma grade 2x2, que eu esperava ser

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

O código para fazer isso:

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

O resultado não é o que eu espero: os dois mais profundosdiv se comportam como deveriam fora de umgrid display: eles se empilham uns sobre os outro

Queria que eles herdassem o comportamento da grade: alinhar com base nos modelos de coluna à medida que avançam. Como conseguir isso?