title: How to flatten nested divs to display them in a CSS grid?
body: <p>I generate a table (with vue.js) from an object which is supposed to be two columns wide. Each of the columns comes from the key and value of the object. This is equivalent to the following actual HTML:</p>
  
  <pre><code>&lt;div id="table"&gt;
    &lt;div&gt;
      &lt;div&gt;
        this is something long on the first row
      &lt;/div&gt;
      &lt;div&gt;
        short 1st row
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;
        wazaa 2nd row
      &lt;/div&gt;
      &lt;div&gt;
        wazii 2nd row
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I use CSS grid to format these <code>div</code> into a 2x2 grid, which I expected to be</p>
  
  <pre><code>this is something long on the first row | short 1st row
  wazaa 2nd row                           | wazii 2nd row
  </code></pre>
  
  <p>The code to do that:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#table {
    display: grid;
    grid-template-columns: auto 1fr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="table"&gt;
    &lt;div&gt;
      &lt;div&gt;
        this is something long on the first row
      &lt;/div&gt;
      &lt;div&gt;
        short 1st row
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;
        wazaa 2nd row
      &lt;/div&gt;
      &lt;div&gt;
        wazii 2nd row
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result is not the one I expect: the two deepest <code>div</code> behave like they should outside of a <code>grid</code> display: they stack on top of each other.</p>
  
  <p><strong>I wanted them to inherit the grid behaviour: to align based on column templates as they go. How to achieve that?</strong></p>