Выравнивание значений характеристик в списке

Итак, маленькая заметка по оформлению. Хотим получить это:

Дата выполнения

27 авг 2016 г.

Категория

Разработка

Работали

Иванов Иван

Не забываем, по картинку с точкой, все на ваш вкус.

Наш HTML-код:

<dl class="dl-style">
    <dt><span><i class="fa fa-calendar" aria-hidden="true"></i> Дата выполнения</span></dt><dd>27 авг 2016 г.</dd>
    <dt><span><i class="fa fa-folder" aria-hidden="true"></i> Категория</span></dt><dd><a href="insight/development/">Разработка</a></dd>
    <dt><span><i class="fa fa-user" aria-hidden="true"></i> Работали</span></dt><dd>Иванов Иван</dd>
</dl>

Наш CSS:

.dl-style {
    padding: 10px;
}
.dl-style i {
    margin-right: 5px;
}
.dl-style dt {
    float: left;
    clear: left;
    overflow: hidden;
    width:50%;
    text-align:left;
    white-space:normal;
    line-height:1.25;
    background:url('../images/hr-dot-gray.gif') 100% 12px repeat-x;
}
.dl-style dt, .dl-style dt span {
    font-weight: 400;
    color:#818690;
}
.dl-style dd {
    margin-left:200px;
    margin-bottom:6px;
    line-height:1.25;
}
.dl-style dt span {
    padding:0 5px 0 0;
    line-height:1.25;
    background:#ffffff;
}