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>