dl dt dd を使用した表組み（レスポンシブ対応）

float と flexbox を使用したテーブル風表組みの作り方

HTMLの基本形

<dl>
	<dt>項目</dt>
	<dd>内容</dd>
</dl>

floatを使用した書き方

dl {
    dt {
        clear: left;
        float: left;
        width: 12em;
        padding: 0.5em 0;
        font-weight:bold;
        @include xs {
        clear: both;
             float: none;
             width: 100%;
             padding: 0.5em 0 0;
         }
    }
    dd {
        margin-left: 0;
        padding: 0.5em 0 0.5em 12em;
        border-bottom: 1px dashed #999;
        @include xs {
            padding: 0 0 0.5em;
         }
    }
}

flexboxを使用した書き方

dl {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    border-top: none;
    @include xs {
        flex-flow: column nowrap;
    }
    dt {
        background: #ddd;
        width: 10em;
        padding: 1em 0.5em;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        @include xs {
            width: 100%;
        }
    }
    dd {
        padding: 1em 0.5em;
        margin: 0;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        width: calc(100% - 10em);
        background: #fff;
        box-sizing: border-box;
        @include xs {
            width: 100%;
            border-left: none;
        }
    }
}

gridを使用した書き方

dl {
    display: grid;
    grid-template-columns: 10em 1fr;
    border: 1px solid #ccc;
    border-top: none;
    @include xs {
        
    }
    dt {
        background: #ddd;
        padding: 1em 0.5em;
        border-top: 1px solid #ccc;
        @include xs {
            width: 100%;
        }
    }
    dd {
        padding: 1em 0.5em;
        margin: 0;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        background: #fff;
        @include xs {
            width: 100%;
            border-left: none;
        }
    }
}