flex-boxを使ったボタン内の文字調整について

Question

質問内容

CSSを勉強中です。
flex-boxを使って水平方向に並ぶボタンを作っています。

下記2つ目のボタンのHelloの高さを1つ目に合わせ、Worldの位置中央のHelloから10pxほど下げる方法を知りたいです。

よろしくお願いします。

参考画像

ソースコード

<div class="btns">
    <button class="btn">
        <span>Hello</span>
    </button>
    <button class="btn">
        <span>Hello</span>
        <span>World</span>
    </button>
</div>

.btns {
  display: flex;
  height: 100px;
}

.btn {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Answer 1

まず、左を基準として右だけ位置を調整したいということでしたので、
それぞれにIDを割り振ります。

    <div class="btns">
        <button class="btn" id="btn1">
            <span>Hello</span>
        </button>
        <button class="btn" id="btn2">
            <span>Hello</span>
            <span>World</span>
        </button>
    </div>

このボタンはjustify-content: center;によって複数行を中央寄せされているため、
行数を追加する度に文字が上へ上へとずれるようになっていますので……
手っ取り早く下に1行追加した分、上にも1行分の空白をあけることでこのずれを修正することができます。

.btns {
    display: flex;
    height: 100px;
}

.btn {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 追加 */
#btn2 span:first-of-type {
    margin-top: 1em;
}

Answer 2

.btn > span + span {
  height: 0;
}

Answer 3

無理やり実装してみましたが、このイメージで合っていますか？

<div class="btns">
    <button class="btn">
        <span>Hello</span>
    </button>
    <button class="btn">
        <span>Hello</span><span class="xxx">World</span>
    </button>
</div>

<style>
.btns {
  display: flex;
  height: 100px;
}

.btn {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.btn span.xxx{
    padding-top: 10px;

}
</style>

補足しますと、justify-content: center;が要素の大きさなども感知してよしなに中央寄せしてくれているものなのですが、
そうすると、中身の大きさに依存するのでpadding-topでピクセルで指定してます。

もう１点、Worldの位置を調整したいとのことでしたので、spanにclassを指定して、そこだけイレギュラー扱いにしています。

あんまり汎用性がないですが。