How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

Question

I am trying to create a list consisting of key-value-pairs where the key is on the left and the values are on the right side one underneath the other.

Author         


        

Answer 1

It's been a few years since this was posted but there is definitely a better way to handle this today using display: grid:

dl {
  display: grid;
  grid-template-columns: 33% auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
}

  
Authors
    
John Doe
    
Jane Doe
    
Max Mustermann

  
Publishers
    
John Doe
    
Jane Doe
    
Max Mustermann