How to flatten nested divs to display them in a CSS grid?

Question

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

Answer 1

You can use display:contents (https://caniuse.com/#feat=css-display-contents) to overcome this:

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

#table > div {
  display:contents;
}

  

    

      this is something long on the first row
    
    

      short 1st row
    
  
  

    

      wazaa 2nd row
    
    

      wazii 2nd row
    
  

Or use display table like below:

#table {
  display: table;
}

#table > div {
  display:table-row;
}
#table > div > div {
  display:table-cell;
  padding:5px;
}
#table > div > div:first-child {
  white-space:nowrap;
  width:10%;
}

  

    

      this is something long on the first row
    
    

      short 1st row
    
  
  

    

      wazaa 2nd row
    
    

      wazii 2nd row