How to create a list of definitions with equal terms of definition of variable length?

Question

I am trying to create a list of definitions (using this guide ) with its dt and dd elements having different contents. Of course, I could hardcode the width for these elements, but I would like the list to occupy the longest dt element and make my siblings have a length. In addition, when the content of the dd element is larger than the available space, a new line should not start below the dt element, but rather, where the dd element begins, as in the second screenshot in this question .

I thought I could solve this with the display: flex attribute, but was stuck with a non-working solution. Is it impossible or am I mistaken?

Here is what I still have (violin) :

HTML:

 <dl> <dt>dt: Lorem Ipsum</dt> <dd>dd: Lorem imperdiet</dd> <dt>dt: Lorem id libero in Ipsum and so on and so on</dt> <dd>dd: Lorem id libero in ipsum dolor</dd> <dt>dt: Lorem Ipsum</dt> <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd> <dt>dt: Lorem id libero in Ipsum</dt> <dd>dd: Lorem in ipsum dolor</dd> </dl> 

CSS

 dl { display: flex; flex-flow: column nowrap; } dt { background: gold; display: flex; flex-flow: row wrap; } dd { background: yellowgreen; display: flex; flex-flow: row wrap; width: auto; margin: 0; padding: 0; } 

Answer 1

I do not think that you can archive what you are trying. Flexbox will not help in this case. You also cannot use a mapping table, etc., because the dl syntax, unfortunately, lacks the wrapping of the dt+dd groups. You will need to use JS for the dt element run width, but that would not be so easy due to multi-line options.

But what about this slightly modified “traditional” approach: make them min-width, but let dt overflow in dd.

 dl:after { content: ''; display: block; clear: both; } dt { float: left; clear: left; padding-top: 1em; margin-right: 1em; } dd { padding-top: 1em; margin-left: 15em; } 

http://codepen.io/ThiemelJiri/pen/KrZrxG

Answer 2

I went with DL:

https://jsfiddle.net/luminancedesign/0u0n39b9/

Uses: before /: after blocks for background striping - best with solid color to eliminate the “embedded” shape, for example

 dt:nth-of-type(even) {background: silver;} dd:nth-of-type(odd) {background: slategrey;} 

and:

 dt:nth-of-type(even)::after {... background: darkgrey;} dd:nth-of-type(odd)::before {... background: lightslategrey;} 

I used the width limit to preserve some kind of “aesthetic” on the screen - the presence of irregular blocks for clear reading. However, this leads to a layout of tabular data and, as mentioned above, a table may be more suitable.