按钮文本行数变化导致其他按钮垂直偏移的问题求助

各位好！我把遇到的问题简化成最基础的版本来求助：页面上有三个横向排列的按钮，每个按钮的文本行数会根据自身状态变化——可能是一行，也可能是两行。

先看初始状态，所有按钮都只显示一行文本，排列很整齐：

但当其中一个按钮被点击，文本变成两行之后，奇怪的问题出现了：

被点击的按钮位置没动，但另外两个按钮居然都向下偏移了，整个布局直接乱了套。

下面是我用到的HTML代码（部分内容未完整粘贴）：

<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,">
    <link rel="stylesheet" ...
  </head>
  <!-- 剩余HTML内容未完整提供 -->

有没有大佬能帮忙指点下，怎么才能让某个按钮文本行数变化时，其他按钮保持原位置不偏移，维持整体布局的整齐呀？

备注：内容来源于stack exchange，提问作者ronkrem