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

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%;
}
<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>


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;
}
<dl>
  <dt>Authors</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>

  <dt>Publishers</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>
</dl>


NOTE: the question have not a good snippet code of HTML (the bellow is better).
... We must start with good HTML structure (not adapt HTML to the simplest CSS). And ideal HTML structure say also some semantic about the content.

One dl list with all items!

The typical applications of <dl>/(<dt>+<dd>) lists are like <ul>/<li> lists, but using key-value pairs instead bullets.

Only one description list:
<dl>
  <dt>Authors</dt>
    <dd>John Doe</dd>
    <dd>Jane Doe</dd>
    <dd>Max Mustermann</dd>

  <dt>Etc</dt>
    <dd>etc...</dd>

  <dt>Publishers</dt>
    <dd>John Willey</dd>
    <dd>Miramax</dd>
    <dd>Mary Max</dd>
</dl>

Other list, now starting with one descriptor-item:
<dl>
  <dt>Test</dt> <dd>One desscriptor here</dd>
  <dt>Etc</dt> <dd>etc...</dd>
</dl>

In this context the solution commented by @kukkuz is valid, with some adaptations for the case where we have only one dd per dt, as this other JsFiddle.

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
dt {
  font-weight: bold;  
  width: 25%;
  padding-top: 1em;  
}
dd {
  display: flex;
  margin: 0;
  padding-top: 1em;
}

dd + dd {
  width: 100%; 
  padding-top: 0;  
}
dt + dd:not(:nth-child(2)),
dt:first-child + dd:nth-child(2) {
  width: 75%;
}
dd + dd::before {
  width: 25%;
  content: "";
  padding-top: 0
}

To really typical and generic (flex) applications, we need to avoid problems with little screens (smarthphones), so put all into a @media block,

@media screen and (min-width: 360px) {
   ... all above CSS here ...
}

@media screen and (max-width: 360px) {
  dt {
    font-weight: bold;  
    width: 33%;
    padding-top: 1em;  
  }
}

See jsfiddle.net/m5qh8g7r.

Tags:

Html

Css

Flexbox

Recent Posts