・カラムが偶数の場合の例
<dl class="dl_2column_table">
  <dt>項目1</dt><dd>内容1</dd>
  <dt>項目2-1<br>項目2-2</dt><dd>内容2</dd>
  <dt>項目3</dt><dd>内容3</dd>
  <dt>項目4</dt><dd>内容4-1<br>内容4-2<br>内容4-3<br>内容4-4</dd>
</dl>

・カラムが奇数の場合の例
<dl class="dl_2column_table">
  <dt>項目1</dt><dd>内容1</dd>
  <dt>項目2-1<br>項目2-2</dt><dd>内容2</dd>
  <dt>項目3</dt><dd>内容3</dd>
</dl>

・カラムが一個の場合の例
<dl class="dl_2column_table">
  <dt>項目1</dt><dd>内容1-1<br>内容1-2<br>内容1-3</dd>
</dl>
/* ブラウザの初期設定をクリア */
dl,dt,dd {
  margin: 0;
  padding: 0;
}

.dl_2column_table {
  background-color: #FFF;
  border-left: 1px solid #E4E4E4;
  margin: 20px;
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.dl_2column_table dt:nth-of-type(-n+2),
.dl_2column_table dd:nth-of-type(-n+2) {
  border-top: 1px solid #E4E4E4;
}
.dl_2column_table dt {
  background-color: #FBFBFB;
  font-weight: bold;
}
.dl_2column_table dt,
.dl_2column_table dd {
  padding: 15px;
  width: 25%;
  box-sizing: border-box;
  border-right:  1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.