リストを横並びにしたが重なってしまう

Question

前提・実現したいこと

フッターを横並びにしたい。

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

Airbnbの模写に取り組んでいるのですが左側のフッターををリストを使って書いたのですが、
回り込んでしまっているのか、文字がairbnbのアイコンの下に書かれてしまいます。

エラーメッセージ

該当のソースコード

<div class="footer">
        <div class="both-footer left-footer">
            <ul class="footer-list">
                <li class="list-item"><i class="fab fa-airbnb"></i></li>
                <li class="list-item"><a href="#">Airbnb Global Services Limited<br>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a><br>Airbnb Global Services Limited
                    観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</li>
            </ul>
        </div>
        <div class="both-footer right-footer">
            <ul class="footer-list">
                <li class="list-item"><input type="button" name="language" value="日本語"></li>
                <li class="list-item"><input type="button" name="currency" value="JPY-￥"></li>
            </ul>
        </div>
    </div>

---------------CSS---------

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

.both-footer ul li {
    display: inline;
}

試したこと

heightをアイコンにつけたりtopで高さを変えたが変わりません。

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

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

Answer 1

.left-footer .footer-list .list-item:first-of-type {
  display: block
}

じゃダメですか？

---

全体的に書き直しました。

<footer>
  <div class="left-footer">
    <div class="ic">
      <i class="fab fa-airbnb"></i>
    </div>
    <div class="cr">
      <a href="#">Airbnb Global Services Limited<br>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a><br>Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
      </ul>
    </div>  
  </div>
  <div class="right-footer">
    <ul>
      <li><input type="button" name="language" value="日本語"></li>
      <li><input type="button" name="currency" value="JPY-￥"></li>
    </ul>
  </div>
</footer>

.ic {
  display: inline-block;
  vertical-align: middle;
}
.right-footer {
  float: right
}
li {
  display: inline
}
footer div {
  display: inline-block
}

$('.ic').css('height',$('.cr').innerHeight());

Comments

[退会済みユーザー]

アイコン
Airbnb Global Services Limited
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)

書いていただいたコードを追加しましたが、上記の様になり横並びになりませんでした。
また、もともと書かれていたコードをコメントにして、書いていただいたコードのみだけで書いてみました、うまくいきませんでした。。。

[kyoya0819]

jQuery使いました。
サンプルは以下をご覧ください。
https://codepen.io/asuchi0819/pen/GRKPvxY

[退会済みユーザー]

わざわざありがとうございます。

コードをコピペして、貼り付けました

横並びにすることができましたが

スペース Airbnb Global Services Limited
スペース 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
アイコン Airbnb Global Services Limited 観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)

上記の様にアイコンが下に行ってしまうのですが。。

[kyoya0819]

jQueryを設定しましたか？
サンプルを見ていただくとわかりますがなってるはずです。

[退会済みユーザー]

サンプルでできていることは確認済みです。
jQueryの知識が乏しいので合っているのかわかりませんが、
headタグ内にscriptタグでver3.4.1のダウンロードしたjqueryファイルを記述して、その下に書いていただいたコードをscriptタグで囲んで記述したのですが。
間違っていますでしょうか。。

[kyoya0819]

bodyの閉じタグの直前に２つを移動してもダメですか？

[退会済みユーザー]

できました!!!
何度も何度もすみませんでした。
これで次に進めます！
本当にありがとうございます。

[kyoya0819]

個人的にはflexが苦手なのでjQiery使いましたがCSSだけでやるならhatena19さんのをご参考にしてください。

Answer 2

下記でどうでしょうか。

.footer, .footer-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.footer-list li {
  display: block;
}

サンプル
リストを横並びに

フレックスボックスを使ってみました。
幅を狭めても横並びを保ちます。