CSS - DL Columns

by Mike Salkeld

HTML

<dl>
    <dt>Directors</dt>
    <dd>Director A</dd>
    <dt>Writers</dt>
    <dd>Writer A</dd>
    <dd>Writer B</dd>
    <dt>Actors</dt>
    <dd>Actor C</dd>
    <dd>Actor D</dd>
    <dd>Actor E</dd>
    <dd>Actor F</dd>
    <dd>Actor G</dd>
    <dd>Actor H</dd>
    <dd>Actor I</dd>
</dl>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
    font: 15px/15px sans-serif;
    -webkit-text-size-adjust: 100%;
}

dl {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

dt {
    width: 50%;
    padding: 15px;
    float: left;
    clear: right;
    background: lightgreen;
}

dd {
    width: 50%;
    padding: 15px;
    float: right;
    clear: right;
    background: skyblue;
}