flexで横並びにしたdt・ddの高さを同じにしたい

Question

前提・実現したいこと

dl・dt・ddを使って、webページに「本の情報」リストを作成しています。
dt・ddを同じ高さで1行で表示したいのですが、高さがずれて表示されます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<section id="detail">
        <div class="inner">
          <h2 class="section-title">DETAIL</h2>
          <div class="content">
            <img src="img/detail.jpg" alt="detail" title="detail">
            <div class="text">
              <h3 class="title">タイトルタイトルタイトル</h3>
              <dl>
                <dt>著者</dt>
                <dd>タイトルタイトルタイトル</dd>
                <dt>出版社</dt>
                <dd>タイトルタイトルタイトル</dd>
                <dt>発行年</dt>
                <dd>タイトルタイトルタイトル</dd>
              </dl>
              <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
              <a class="link" href="#">オンラインストアで見る</a>   
            </div>
          </div>
        </div>
      </section>

#detail .content dl {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 25px;
  border-top: solid 1px #DEDEDE;
  border-bottom: solid 1px #DEDEDE;
}


#detail .content dt {
  width: 25%;
}

#detail .content dd {
  width: 75%;
}

試したこと

調べたのですが原因がわかりませんでした。

補足情報（FW/ツールのバージョンなど）

Answer 1

dt-ddは必ずしも一対一対応しないのでズレたときにどうしたいかによりますね

<style>
dl{
display:flex;
flex-wrap: wrap;
width:40%;
}
dt{
background-Color:lime;
width:20%;
}
dd{
margin:0;
background-Color:aqua;
width:80%;
}
</style>
<dl>
<dt>著者</dt>
<dd>タイトルタイトルタイトル</dd>
<dt>出版社</dt>
<dd>タイトルタイトルタイトル</dd>
<dt>発行年</dt>
<dd>タイトルタイトルタイトル</dd>
</dl>

Answer 2

以下を追加するとどうですか？

#detail .content dd {
	margin: 0;
}

Comments

[zero5]

期待通り、表示できました。ありがとうございました。