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

How about setting flex-wrap on the dl and have a width > 50% for dd along with margin-left: auto?

See demo below:

dl {
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 33%;
}
dd {
  margin-left: auto;
  width: 66%;
}

  
Authors
  
John Doe
  
Jane Doe
  
Max Mustermann



  
Publishers
  
John Doe
  
Jane Doe
  
Max Mustermann