Flexboxレイアウト – 定義リストレイアウト

HTML

<dl>
  <dt>会社名</dt>
  <dd>Stock株式会社</dd>
</dl>

<dl>
  <dt>本社住所</dt>
  <dd>東京 千代田区○○1丁目1234-5</dd>
</dl>

<dl>
  <dt> 話番号</dt>
  <dd>03-1234-5678</dd>
</dl>

CSS

dl {
  display: flex;
  justify-content: space-between;

dt {
  padding: 20px 30px;
  width: 230px;
  border-bottom: 2px solid #5b8f8f;
}

dd {
  padding: 20px 30px;
  width: calc(100% - 230px);
  border-bottom: 2px solid #bbb;
}