dl,dt,ddを表形式表示をするスタイル

いろいろブラッシュアップして、これが最善策。最善策と思ったけど、WordPressでサイトを構築する場合、TinyMCEがdlの子要素のdivを認めてくれなくて、dl,dt,ddタグを消してしまうので、このコードは使えない。TinyMCEのconfigを弄って、dl子要素のdivを許可するようにしたけど、それはそれでうまくいかない。ということで、その場合はDiv無バージョンのこちら

HTML
<dl>
	<div>
		<dt>内容量</dt>
		<dd>１個２３０ｇ</dd>
	</div>
		<div>
		<dt>賞味期限</dt>
	<dd>３週間</dd>
	</div>
	<div>
		<dt>原材料</dt>
		<dd>砂糖　小豆　黒砂糖　寒天　水飴　ソルビトール</dd>
	</div>
	<div>
		<dt>保存方法</dt>
		<dd>直射日光並びに高温多湿をさけて保存</dd>
	</div>
</dl>

CSS
dl,
dt,
dd {
	box-sizing: border-box;
}

dl {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	margin-bottom:0;
	margin-top:0;
}

dl>div{
	display:flex;
}

dt,
dd {
  	padding: 10px 10px 10px 10px;
	margin-bottom:0;
	border-bottom: 1px solid #ddd;
}

dt {
	border-left:none;
	font-weight:normal;
	flex-basis:20%;
	background:#eee;
	border-right: 1px solid #ddd;
}

dd {
        border-right: 1px solid #ddd;
        margin:0;
        flex-basis:80%;
}

dlの子要素にdivを挟んでるところが微妙であるが、

dl>div{
	display:flex;
}

これを

dl>div{
	display:block;
}

に、変更することで縦積みにしてレスポンス対応にできる。

DIVを挟まないバージョン

HTML
<div>
<dl>
<dt>内容量</dt>
<dd>１個２３０ｇ</dd>
</dl>
<dl>
<dt>賞味期限</dt>
<dd>３週間</dd>
</dl>
<dl>
<dt>原材料</dt>
<dd>砂糖　小豆　黒砂糖　寒天　水飴　ソルビトール</dd>
</dl>
<dl>
<dt>保存方法</dt>
<dd>直射日光並びに高温多湿をさけて保存</dd>
</dl>
</div>

CSS
dl,
dt,
dd {
	box-sizing: border-box;
}

dl {
	border-left: 1px solid #ddd;
	margin-bottom:0;
	margin-top:0;
        display:flex;
}

dl:first-child{
	border-top: 1px solid #ddd;
}

dt,
dd {
  	padding: 10px 10px 10px 10px;
	margin-bottom:0;
	border-bottom: 1px solid #ddd;
}

dt {
	border-left:none;
	font-weight:normal;
	flex-basis:20%;
	background:#eee;
	border-right: 1px solid #ddd;
}

dd {
        border-right: 1px solid #ddd;
        margin:0;
        flex-basis:80%;
}

サンプル