CSSで記述リスト（DL・DT）を横並びにする

□　float：left ;　を使う

ソフトドリンク

一般の飲料

お酒

アルコール入り飲料

20歳未満は飲めない飲料

炭酸飲料

炭酸ガスの入った飲料

dl.ex-1 dt {
  float: left;
  clear: both;
  width: 200px;
  padding: 0px 0px 0px 20px;
}

dl.ex-1 dd {
  width: 420px;
  margin: 3px 0px 3px 221px;
  padding: 0px 0px 0px 20px;
} 

□　negative margin ;　を使う

ソフトドリンク

一般の飲料

お酒

アルコール入り飲料

20歳未満は飲めない飲料

炭酸飲料

炭酸ガスの入った飲料

dl dt {
  width: 200px;
  padding: 0px 0px 0px 20px;
  margin-top: 2px;
}
dl dd {
  width: 420px;
  padding: 0px 0px 0px 20px;
  margin: -38px 0 0 221px;
} 
dl dd + dd{
  margin-top: 2px;
}

□　position: absolute;　を使う

ソフトドリンク

一般の飲料

お酒

アルコール入り飲料

20歳未満は飲めない飲料

炭酸飲料

炭酸ガスの入った飲料

dl {
  position: relative;
}
dl dt {
  position: absolute;
  left: 0;
  width: 200px;
  padding-left: 20px;
}

dl dd {
  width: 420px;
  margin-left: 221px;
  padding-left: 20px;
}

□　display:flex;　を使う

ソフトドリンク

一般の飲料

お酒

アルコール入り飲料

20歳未満は飲めない飲料

炭酸飲料

炭酸ガスの入った飲料

dl  {
  display:flex;
  flex-wrap:wrap;
  align-content: space-between;
  align-items:center;
  width: 664px;
}
dl {
  width: 200px;
  padding-left: 20px;
  margin-left: 0px;
  margin-right: 0px;
}

dl dd {
  width: 420px;
  padding-left: 20px;
  margin-left: -1px;
  margin-right: 0px;
}