columns based on page width

by Phil

HTML

<div class="table_data">
    <dl>
        <dd>1-1</dd>
        <dd>1-2</dd>
    </dl>
    <dl>
        <dd>2-1</dd>
        <dd>2-2</dd>
    </dl>
</div>

CSS

dt, dd, dl {
    margin:0;
    padding:0;
    border-spacing:0;
}
dl {
    display:table;
    width:100%;
}
dt, dd {
    width:100%;
    display:block;
}
@media only screen and (min-width:468px) {
    dt, dd {
        width:50%;
        float:left;
    }
}