htmlcss：横並びにしたいのに高さが合いません

前提

html、cssの勉強をしています。こちらのサイトを模写コーディングしているのですがDETAILの左側が上に変なスペースが空いてしまいます。（わかりやすくするために背景色をつけています。）

どうしてこのようになってしまうのでしょうか？またどうやったら高さをそろえることができますか？

実現したいこと

著者～をテキスト以下略と同じ高さに持っていきたいです

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

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="css/style.css">
9    <title>PHOTO BOOK2</title>
10</head>
11
12<body>
13
14    <header>
15        <a href="index.html"><img src="img/logo.svg" alt="logo"></a>
16    </header>
17
18    <div class="main-image"><img src="img/mainvisual.jpg" alt="main-image"></div>
19    <div class="wrapper">
20        <div class="index-wrapper">
21            <h2>INDEX</h2>
22            <ol>
23                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
24                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
25                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
26                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
27                <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
28            </ol>
29        </div>
30
31        <div class="images">
32            <img src="img/photo1.jpg" alt="photo1">
33            <img src="img/photo2.jpg" alt="photo2">
34            <img src="img/photo3.jpg" alt="photo3">
35            <img src="img/photo4.jpg" alt="photo4">
36        </div>
37        <div class="detail">
38            <h2>DETAIL</h2>
39            <div class="detail-content">
40                <div class="detail-left">
41                    <dl>
42                        <dt>著者：</dt>
43                        <dd>タイトルタイトルタイトル</dd>
44                        <dt>出版社：</dt>
45                        <dd>タイトルタイトルタイトル</dd>
46                        <dt>発行年：</dt>
47                        <dd>タイトルタイトルタイトル</dd>
48                    </dl>
49                </div>
50                <div class="detail-right">
51                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
52                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
53                    <a href="#online.com">オンラインストアで見る</a>
54                </div>
55            </div>
56        </div>
57
58    </div>
59
60    <footer>&copy; 2020 PHOTO BOOK 2</footer>
61</body>
62
63</html>

css
1html{
2    font-size:100px;
3}
4img{
5    width:100%;
6}
7a{
8    color:black;
9}
10body{
11    margin:0 auto;
12    width:55%;
13}
14h2{
15    font-size:18px;
16    font-family:"Meiryo"
17}
18/* ヘッダ */
19header{
20    height:95px;
21}
22header img{
23    margin-top:25px;
24    width:180px;
25    height:100%;
26}
27.wrapper{
28    width:800px;
29    margin:0 auto;
30}
31.index-wrapper{
32    background-color:#F5F5F5;
33    padding-top:60px;
34    padding-bottom:60px;
35}
36.index-wrapper h2{
37    margin:0 auto;
38    width:fit-content;
39    margin-bottom:40px;
40}
41ol{
42    margin:0 auto;
43    font-size:14px;
44    line-height:40px;
45    border:1px solid black;
46    width:680px;
47    padding-top:35px;
48    padding-bottom:35px;
49}
50li{
51    margin:0 auto;
52    width:fit-content;
53}
54
55.images{
56    margin-top:60px;
57    display:flex;
58    flex-wrap:wrap;
59    column-gap: 15px;
60    row-gap:15px;
61    margin-bottom:60px;
62}
63.images img{
64    width:49%;
65    height:auto;
66}
67
68/* DETAIL */
69.detail{
70    background-color:#F5F5F5;
71    padding:60px;
72    height:320px;
73    margin-bottom:70px;
74}
75.detail h2{
76    width:fit-content;
77    margin:0 auto;
78}
79
80.detail-content{
81    display:flex;
82}
83dt{
84    font-size:14px;
85    font-weight: bold;
86}
87dd{
88    font-size:14px;
89}
90.detail-right {
91    margin-top:10px;
92    font-size:14px;
93    border-left:black solid 1px;
94    padding-left: 30px;
95    width:65%;
96    background-color:blue;
97    height:100%;
98}
99.detail-left{
100    width:35%;
101    padding-right:30px;
102    background-color:red;
103    height:100%;
104    margin-top:10px;
105}
106
107
108footer{
109    font-size:10px;
110    padding-bottom:20px;
111    width:fit-content;
112    margin:0 auto;
113}