html definition list on same line with variable dt size

Question

I'm trying to create a dl with the dt and dd on the same line and with the following additional requirements:

• dt and dd are shown on the same line
• width of all the dt's are the same and should be the same as the with of the longest content (in this example 'location', but it should also be working with different content)
• width of dd is the rest of the available space
• space between dt and dd is 1em
• vertical margin between dl and next dd is 1em

My code so far:

dt {
    margin: 1em 1em 0 0;
}
dd {
    margin: 0;
}

<dl>
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel, pronounced: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>

Answer 1

Here are two partial solutions, one using flexbox, another using floats. No extra HTML, just yours. Both solutions are not for old browsers. Possible to get rid of calc() by putting the horizontal spacing inside elements, not outside (margin), as it is now.

Well, and the main thing: sorry, but the widths are static — 20% for dt, 80%-1em for dd. To make it work like you need, taking the max width of all dt elements, you'll have to use JavaScript and count widths of dt and dd. Or switch to ye olde table layout, which would literally solve the whole thing. As far as I know.

dl.using-flex{ display: flex; flex-direction:row; flex-wrap: wrap; }
.using-flex dt { flex-basis:20%; }
.using-flex dd { flex-basis: calc(80% - 1em); }


dl.using-floats{ overflow:hidden; /* for clearfix */}
.using-floats dt{ float:left; width:20%; clear:left;}
.using-floats dd{ float:left; width:calc(80% - 1em); }

dt, dd{ margin:0 0 1em; }
dd{ margin-left:1em; }

<h2>Using flexbox</h2>
<dl class="using-flex">
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/?a?f?l ?ta??r/ eye-f?l towr; French: Tour Eiffel, pronounced: [tu???f?l] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>

<h2>Using floats</h2>
<dl class="using-floats">
    <dt>Date:</dt>
    <dd>wed 6 january 2017</dd>
    <dt>Location:</dt>
    <dd>
        Champ de Mars<br/>5 Avenue Anatole France<br/>75007 Paris
    </dd>
    <dt>Info:</dt>
    <dd>
        The Eiffel Tower (/?a?f?l ?ta??r/ eye-f?l towr; French: Tour Eiffel, pronounced: [tu???f?l] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
    </dd>
</dl>

Answer 2

You can do it with float: left on dt and dd, clear: both on dt and percentage widths on both (adjust values to your needs)

(unaltered HTML)

dt {
  margin: 1em 1em 0 0;
  float: left;
  clear: both;
  width: 15%
}
dd {
  margin: 1em 0 0 0;
  float: left;
  width: 80%;
}

<dl>
  <dt>Date:</dt>
  <dd>wed 6 january 2017</dd>
  <dt>Location:</dt>
  <dd>
    Champ de Mars
    <br/>5 Avenue Anatole France
    <br/>75007 Paris
  </dd>
  <dt>Info:</dt>
  <dd>
    The Eiffel Tower (/?a?f?l ?ta??r/ eye-f?l towr; French: Tour Eiffel, pronounced: [tu???f?l] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed
    and built the tower.
  </dd>
</dl>