Responsive Definition List

Cómo hacer una lista de definiciones que sea responsive

by rulokc

HTML

<div class="ateam">
    <dl class="clearfix">
        <dt>John Smith</dt>
        <dd>Anibal <br/> Coronel</dd>
        <dt>Templeton Peck</dt>
        <dd>Face <br/> Teniente</dd>
        <dt>Murdock</dt>
        <dd>Capitán</dd>
        <dt>Mario Barakus</dt>
        <dd>Sargento</dd>
    </dl>
</div>
    
<div class="bteam">
    <ul class="clearfix">
        <li>
            <span class="name">John Smith</span>
            <span class="info">Anibal <br/> Coronel</span>
        </li>
        <li>
            <span class="name">Templeton Peck</span>
            <span class="info">Face <br/> Teniente</span>
        </li>
        <li>
            <span class="name">Murdock</span>
            <span class="info">Capitán</span>
        </li>
        <li>
            <span class="name">Mario Barakus</span>
            <span class="info">Sargento</span>
        </li>
    </ul>
</div>

CSS

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
dl {
    min-width: 240px;
    background: #f0f;
}
dt {
    display: block;
    clear: both;
    float: left;
    width: 40%;
    min-width: 120px;
    background: #0f0;
}
dd {
    display: block;
    float: left;
    margin: 0;
    width: 40%;
    min-width: 120px;
    background: #0ff;
}

ul {
    list-style: none;
    padding: 0;
    min-width: 240px;
    background: #f5f;
}
.name {
    clear: both;
    float: left;
    width: 40%;
    min-width: 120px;
    background: #5f5;    
}
.info {
    float: left;
    margin: 0;
    width: 40%;
    min-width: 120px;
    background: #5ff;
}