HTML&CSSで、要素を横並びにして、模写しているサイト通りの表示にしたい。

前提・実現したいこと

サイト模写の練習として
https://aoinagase.github.io/KuriCafe/
を参考に模写をしているのですが
下部にある
・住所情報
・マップ情報
の部分の再現の方法がわからず行き詰まっております。

自分が実現したいのは、添付画像の通りなのですが
どのようにHTMLとCSSを書くことで実現できますでしょうか。

どうかご教示いただけますと幸いです。

該当のソースコード

■HTML（質問者が書いたもの）
<!-アクセス->
  <div class="wrapper-4">
    <div class="access">
      <img src="logo.png">
      <p>
        〒000-0000<br>
        東京都××区××●丁目●番●号<br>
        TEL : 03-0000-0000 (代表)<br>
        FAX : 00-0000-0000
      </p>
        <img class="sns" src="facebook.png">
        <img class="sns" src="twitter.png">
        <img class="sns" src="instagram.png">
        <img class="sns" src="line.png">
      </div>
      <div class="map">
      <img src="map.png">
      </div>
    </div>

■CSS（質問者が書いたもの）
.access{
    display:flex;