@charset "UTF-8";

dl, dt, dd {
  box-sizing: border-box;
  border: 1px none #ccc; /* 共通のborderを定義。ただし、border-styleをnoneにし、初期状態では非表示にする */
}

dt, dd {
  margin: 0;
  border-top-style: solid; /* 上のborderを表示 */
  padding: 10px;
}

dl {
  display: flex; /* Flexible Boxを有効化 */
  flex-wrap: wrap; /* はみ出そうな時の折り返しを有効化 */
  border-style: none solid solid; /* 上を除く、全てのborderを表示 */
}

dt {
  width: 30%; /* 幅を指定 */
  background: #eee; /* dt要素のための背景色を指定 */
}

dd {
  width: 70%; /* 幅を指定 */
  border-left-style: solid; /* 左のborderを表示 */
}