縦文字の行初めを揃えたい

縦文字を揃えたい。

以下の写真のように、「ご挨拶」の文字だけが下がっています。
これを揃える良い方法はできますでしょうか。

html

<div class="footer-info-right">
    <nav class="footer-navigation">
      <ul>
        <li><a href="">ご挨拶</a></li>
        <li><a href="">お品書き</a></li>
        <li><a href="">こだわり</a></li>
      </ul>
    </nav>

css

@media (max-width: 850px) {
  .footer-navigation ul li {
    display: inline;
    font-size: 14px;
    padding: 0 15px;
  }
}

@media (max-width: 650px) {
  .footer-navigation ul li {
     writing-mode: vertical-rl;
     padding: 0 10px;
  }
}

試したこと

以下の記事などを参考にしましたがだめでした。
アドバイスよろしくお願いします...

https://www.sejuku.net/blog/76881
https://tategaki.github.io/explan1.html
https://www.webcreatorbox.com/tech/writing-mode

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

回答1件

ベストアンサー

CSS
1@media (max-width: 650px) {
2  .footer-navigation ul li {
3     writing-mode: vertical-rl;
4     padding: 0 10px;
5     vertical-align: text-top; /* ADD */
6  }
7}
8```**動くサンプル：**[https://jsfiddle.net/0tqvojsy/](https://jsfiddle.net/0tqvojsy/)