上下の要素の位置を揃えたい

前提・実現したいこと

写真の上の赤と青の要素の位置に下の要素もそろえたい。
1024pxの画面で作っているのだが、画面サイズが大きくなっても位置がそろうようにしたい。

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

上下の要素の位置を揃えたいのだがそろわない。

該当のソースコード

html
1 <div class="main-contents__box">
2                <div class="main-contents__list">
3                    <article class="main-contents__block">
4                        <figure class="main-contents__image">
5                            <a href="#">
6                                <img src="">
7                            </a>
8                        </figure>
9                        <section class="main-contents__texts">
10                            <p class="main-contents__time">2020/09/09</p>
11                            <h2><a href="">タイトル</a></h2>
12
13                            <p class="main-contents__description">
14                                テキスト</p>
15                        </section>
16                        <p class="btn"><a href="#">READ MORE</a></p>
17                    </article>繰り返し
18
19                   
20
21                <!-- サイドバー -->
22                <div class="sidebar">
23                    <div class="sidebar-profile">
24                        <h4 class="sidebar-title">About me</h4>
25                        <p class="profile-image"><img
26                                src="<?php echo get_template_directory_uri(); ?>/images/simomura12.jpg" width="130"
27                                height="" alt=""></p>
28                        <h4 class="sidebar-name"></h4>
29                        <p class="profile-text">
30                            テキスト</p>
31                        <div class="profile-link">
32                            <p><a href="#">テキス</a></p>
33                            <p><a href="#">テキスト</a></p>
34                            <p><a href="#">テキスト</a></p>
35                            <p><a href="#">テキスト</a></p>
36                        </div>
37                    </div>繰り返し

sass
1 .main-contents__box {
2            display: flex;
3            align-content: flex-start;
4            align-items: flex-start;
5            
6            .main-contents__list {
7                margin-left: 30px;
8               
9                
10                
11                
12                @include common-block("large");
13                
14            }
15        }
16    }
17
18    
19
20    .sidebar{
21        max-width: 50%;
22      
23       
24
25        
26        .sidebar-profile{
27            padding: 30px;
28            background-color: $common-color;
29            max-width: 300px;
30            box-shadow: 0 0 8px gray;
31            border: 1px solid $main;
32            border-radius: 5px;
33            margin-bottom: 30px;
34            margin-right: -30px;
35
36            @include sidebar-title();
37            
38            .profile-image{
39                text-align: center;
40                margin: 40px 0;
41                text-align: center;
42
43                img{
44                    border-radius: 50%;
45                    
46                    
47                }
48            }
49
50            .sidebar-name{
51                font-size: 20px;
52                text-align: center;
53                margin-bottom:40px;
54                font-weight: 600;
55            }
56            .profile-text{
57                font-size: 12px;
58                padding:0 20px;
59                line-height: 1.75;
60                
61            }
62            .profile-link{
63                margin-top: 40px;
64                text-align: right;
65                a{
66                    line-height: 1.5;
67                    &::after{
68                        content:  '';
69                        width: 0;
70                        height: 0;
71                        border-style: solid;
72                        border-width: 5px 0 5px 7px;
73                        border-color: transparent transparent transparent $navbar;
74                        display:  inline-block;
75                        vertical-align:  middle;
76                        position:  relative;
77                        top: -2px;
78                        margin-right: 3px;
79                    }
80                }
81            }
82        }

common
1@else if( $type == 'large' ){
2    //スタイル
3    .main-contents__block{
4        list-style: none;
5        max-width: 650px;
6        border: 1px solid $main;
7        border-radius: 5px;
8        overflow: hidden;
9        box-shadow: 0 0 8px gray;      
10        @include btn();
11        text-align: center;
12        margin-bottom: 60px;
13        .main-contents__image{
14            max-width: 775px;
15               
16            a{
17                display: block;
18                
19                img{
20                    
21                    width: 100%;
22
23                    height: 100%;
24                    max-height: 600px;
25                    object-fit: cover;
26                    background-size: cover;
27                    
28                }
29            }
30        }
31        
32        
33        .main-contents__texts{
34            word-break: break-all;
35            padding: 60px;
36            text-align: center;
37            
38            
39            .main-contents__time{
40                margin-bottom: 30px;
41            }   
42            h2{
43                margin-bottom: 30px;
44               
45                min-height: calc((1px *5 ) + 0px);
46                a{
47                    color: $main-contents_a;
48                }
49            }
50            .main-contents__description{
51                line-height: 1.75;
52                min-height: calc((1px *1.75 *10 ) + 30px);
53
54            }
55            
56            
57        }
58      
59    }
60  }