テキストを中央左揃えにしたい

前提・実現したいこと

写真のようにテキストを揃えたいのだが、右のテキスト部分が各ブロックごとでずれてしまう。
これを揃えたい。

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

右のテキスト部分が各ブロックごとでずれてしまう。

該当のソースコード

html
1 <div class="footer-reserve">
2        <div class="footer-reserve__left">
3            <dl>
4                <dt><span><i class="fas fa-phone-square-alt"></i></span>住所・電話</dt>
5                <dd>〒160-8582 東京都新宿区信農町35<br> 03-3353-1211(代表)</dd>
6            </dl>
7            <dl>
8                <dt><span><i class="fas fa-clock"></i></span>診療受付</dt>
9                <dd>午前8時40分〜午前11時00分</dd>
10            </dl>
11            <dl>
12                <dt><span><i class="fas fa-clock"></i></span>正面玄関解錠</dt>
13                <dd>診療日:午前6時45分〜午後7時15分<br>休診日:午後1時00分〜午後7時15分<br>(指定の時間以外は出入り口を閉鎖)
14                </dd>
15            </dl>
16            <dl>
17                <dt><span><i class="fas fa-calendar-alt"></i></span>休診日</dt>
18                <dd>日曜日・第1・3土曜日<br>国民の祝日・休日<br>年末年始(12/30〜1/4)<br>慶應義塾の休日(1/10)</dd>
19            </dl>
20        </div>
21        <div class="footer-reserve__right">
22            <img src="image/top_map.png" alt="">
23            <div class="reserve-right__wrapper">
24                <div class="reserve-wrapper__left">
25                    <p>アクセスに<br>ついて</p>
26                </div>
27                <div class="reserve-wrapper__right">
28                    <p><a href="#">フロアマップ</a></p>
29                    <p><a href="#">院内施設一覧</a></p>
30
31                </div>
32
33            </div>
34
35        </div>
36    </div>
37

sass
1.footer-reserve{
2    background-color: $footer-reserve__back;
3    display: flex;
4    justify-content: center;
5    align-items: center;
6    padding: 60px;
7    .footer-reserve__left{
8        background-color:$footer-left ;
9        
10        
11        dl{
12            padding: 30px 20px;
13            
14            &:not(:last-child){
15                border-bottom: 1px solid $footer-left___border;
16            }
17            
18            display: flex; 
19            align-items: center;
20            
21            dt{
22                margin-right: 20px;
23                
24                
25            }
26            span{
27                
28                
29                i{
30                    color: $footer-reserve__fontawsome;
31                    font-size: 1.5rem;
32                    margin-right: 3px;
33                }
34            }
35            dd{
36                word-break: break-all;
37                font-size: 0.8rem;
38            }
39        }
40    }
41}
42

試したこと

justify-content: center;で真ん中に寄せようとしたら無理だった

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

ベストアンサー

dtはwidth指定で幅固定して、ddだけ可変にしてやるのはどうでしょう？

Sass
1.footer-reserve{
2
3    .footer-reserve__left{
4        dl{
5            dt{
6                margin-right: 20px;
7                width: 40%; // 追加
8
9            }
10            dd{
11                word-break: break-all;
12                font-size: 0.8rem;
13                flex: 1; // 追加
14            }
15        }
16    }
17}