display: flex　高さがずれてしまう。

前提・実現したいこと

画像①

画像②

画像①を模写しており、現在の状態が画像②の状態なのですが、黒丸で囲んだ部分がどうしても高さが左の文字とずれてしまいます。画像①を見ていただければわかると思いますが、黒丸で囲んだ部分と左の要素の高さは揃っています。
黒丸で囲んだ部分と、左にある要素は、”display:flex;”で横並びにしました。
Twitterアイコン等は、font awesomeを利用しました。

独学でのプログラミング学習で初めての模写でしたので、コードは載せましたが他にも必要な情報等があれば追記しますので、回答お願いいたします。

該当のソースコード

HTML

<footer id="footer">
  	<br><br>
  	<div class="footer-main">
  	<div class="footer">
  	<div class="footer-1 footer-first">
  		<ul>
  			<li>企業情報</li>
  			<li><a href="#">Airbnbのご利用方法</a></li>
  			<li><a href="#">ニュースルーム</a></li>
  			<li><a href="#">株主・投資家のみなさまへ</a></li>
  			<li><a href="#">Airbnb Plus</a></li>
  			<li><a href="#">Airbnb Luxe</a></li>
  			<li><a href="#">HotelTonight</a></li>
  			<li><a href="#">Airbnbビジネスプログラム</a></li>
  			<li><a href="#">オリンピック</a></li>
  			<li><a href="#">採用情報</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>コミュニティ</li>
  			<li><a href="#">ダイバーシティ＆ビロンギング</a></li>
  			<li><a href="#">アクセシビリティ対応</a></li>
  			<li><a href="#">Airbnbアソシエイト</a></li>
  			<li><a href="#">お友達を招待</a></li>
  			<li><a href="#">Airbnb.org</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>ホスト</li>
  			<li><a href="#">お部屋を掲載</a></li>
  			<li><a href="#">オンライン体験をホストする</a></li>
  			<li><a href="#">体験をホストする</a></li>
  			<li><a href="#">責任あるホスティング</a></li>
  			<li><a href="#">リソースセンター</a></li>
  			<li><a href="#">コミュニティセンター</a></li>
  		</ul>
  	</div>
  	<div class="footer-1">
  		<ul>
  			<li>サポート</li>
  			<li><a href="#">Airbnbの新型コロナウイルスに対する取り組み</a></li>
  			<li><a href="#">ヘルプセンター</a></li>
  			<li><a href="#">キャンセルオプション</a></li>
  			<li><a href="#">近隣コミュニティサポート</a></li>
  			<li><a href="#">信頼＆安全</a></li>
  		</ul>
  	</div>
  </div>
  <br> 
  <hr class="m-0">
  <div class="footer2-3">
  <div class="footer-2">
    <pre><a href="#">Airbnb Global Services Limited
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a>
© 2020 Airbnb, Inc. All rights reserved·<a href="#">プライバシー</a>·<a href="#">利用規約</a>·<a href="#">サイトマップ</a>·<a href="#">企業情報</a>
    </pre>
  </div>
  <div class="footer-3">
    <div class="footer-3-1">
  	  <ul>
  	    <li><p><a href="#"><i class="fas fa-adjust"></i>日本語 (JP)</a></p></li>
  	    <li><p><a href="#"><i class="fas fa-yen-sign"></i>JPY</a></p></li>
  	  </ul>
    </div>
    <div class="footer-3-1">
  	  <ul>
  		<li><p><a href="#"><i class="fab fa-facebook-f"></i></a></p></li>
  	  	<li><p><a href="#"><i class="fab fa-twitter"></i></a></p></li>
  	  	<li><p class="insta"><a href="#"><i class="fab fa-instagram"></i></a></p></li>
  	  </ul>
    </div>
  </div>
</div>
  </div>
  </footer>

CSS

#footer{
	width: 100%;
	background-color: pink;
	border-top: solid 1px gray;
}

.footer-main{
	width: 90%;
	margin: 0 auto;

}

.footer-main hr{
	width: 100%;
}

.footer{
	display: flex;
	justify-content: space-between;
}

/*
.footer-first{
	margin-left: -40px;
}
*/

.footer-1 ul{
	list-style: none;
	font-size: 13px;
}

.footer-1 a{
	text-decoration: none;
	color: gray;
}

.footer-1 a:hover{
	text-decoration: underline;
}

.footer-1 li{
	margin: 10px 0;
}

.footer2-3{
	display: flex;
	justify-content: space-between;
}


.footer-2 pre{
	color: gray;
}

.footer-2 a{
	text-decoration: none;
	color: gray;
}

.footer-2 a:hover{
	text-decoration: underline;
}

.footer-3{
	display: flex;
}

.footer-3-1 ul{
	list-style: none;
	display: flex;
}

.footer-3-1 a{
	color: gray;
}

.footer-3-1 a:hover{
	opacity: 0.5;
}

.footer-3-1 i{
	margin: 0px 10px;
}

.insta{
	margin-right: -10px;
}