Align HTML5 Definition List like a table, without setting widths, and without Javascript

Question

The HTML5 DL element, (markup like):

<dl class="inline">
    <dt>Name</dt>
    <dd>Alex</dd>
    <dt>Age</dt>
    <dd>22</dd>
    <dt>Hobby</dt>
    <dd>Programming</dd>
</dl>

renders by default like this:

Name
    Alex
Age
    22
Hobby
    Programming

However I want it to be rendered like a table, where the columns line up:

Name    Alex
Age     22
Hobby   Programming

This can easily be done using css

dl.inline dt{clear:left}
dl.inline dt,dl.inline dd{float:left}

and by setting the widths of the DT elements

dl.inline dt{width: 100px}

     100px
<----------->
Name         Alex
Age          22
Hobby        Programming

Success!

The issue is, this requires setting the width to the longest text. This means the css depends on the html. Esentially EVERYTIME I create a new definition list, I have to create a new css class, find the longest word, and then add that to the css

dl.inline.dt-where-the-longest-string-is-email-address{width:86px}

I want the DT elements to automatically be as long as the longest one is.

This could EASILY be done using jquery. We basically loop the DT's and remember the longest. Then set all others within that DL to that length:

(function()
{
    // for every DL on the page, that has class 'inline'
    $('dl.inline').each(function(dl_idx, dl_node)
    {
        var dl = $(dl_node),  // the current DL
            longest = 0;   // the current longest

        // go through its DT elements
        dl.each(function(dt_idx, dt_node)
        {
            var width = $(dt_node).width();

            // if this width is larger than the largest so far
            if(width > longest)
            {
                // store this width as the new longest
                longest = width;
            }
        });

        // Set all the DT elements in this DL to the longest found
        dl.children('dt').width(longest);
    });
}());

This code may not be perfect, but it puts the point across.

I was hoping for a pure css solution, that uses the browsers native code rather than javascript.

HTML Tables use properties like display:table-cell although I have not been able to get anything to work...

The solution I am looking for:

• Does NOT change the DL markup
• Does NOT use javascript

If it turns out that such a solution is NOT possible. Or REQUIRES the markup to be different, then I suppose the javascript solution will have to do for now.

I should probably state that the REASON I'm not just using a table, is because I feel the data is not tabular enough. That kind of data is more like ONE ROW of a table. I feel like the Definition List better defines the relationships between the Key and the Value (i.e. Name -> Alex)

Answer 1

Pure CSS solution:
check my example on codepen