使一个SPAN适合另一个SPAN高度

Question

我正在拼命尝试使两个对齐的跨度在移动视图中彼此匹配高度。

这是代码： https://codepen.io/anon/pen/oMgYEe

    .td_btn {
        cursor: pointer;
        display: inline-block;
        position: relative;
        font-weight: 600;
    }

    .td_btn_md {
        padding: 9px 12px;
        font-size: 16px;
        line-height: 20px;
    }

    .td_outlined_btn {
        border-width: 2px;
        border-style: solid;
        border-radius: 4px;
        background-color: transparent;
        transition: all 0.1s ease;
        -webkit-transition: all 0.1s ease;
    }

HTML :
<div class="btn-sidebar">
       <span style="margin-right: 5px;">
       <a href="#">
       <span class="td_btn td_btn_md td_outlined_btn">Button</span>
       </a>
       </span>
       <a href="#">
       <span class="td_btn td_btn_md td_outlined_btn">Button Partner</span>
       </a>
    </div>

虽然当父div大于228像素时它们在这里看起来不错，但是当父div的大小调整为228像素时，由于具有更多文本，因此右按钮的大小比另一个大，因此它占用了两行文本。查看：

我不能使用空格不换行，因为这样文本超出了按钮的大小，并且我不想调整字体大小以使其适合一行文本。

相反，我要使第一个按钮与第二个按钮高度匹配

有什么想法吗？

谢谢！

Answer 1

Flexbox可以做到这一点。

.td_btn {
  cursor: pointer;
  display: inline-flex;
  text-align: center;
  align-items: center;
  font-weight: 600;
  height: 100%;
}

.td_btn_md {
  padding: 9px 12px;
  font-size: 16px;
  align-content: center;
  margin-right: 5px;
  ;
}

.td_outlined_btn {
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
}

.btn-sidebar {
  display: flex;
  margin-bottom: 2em;
}

.skinny {
  width: 200px;
}

<div class="btn-sidebar">
  <a href="#"><span class="td_btn td_btn_md td_outlined_btn">Button</span></a>
  <a href="#"><span class="td_btn td_btn_md td_outlined_btn">Button Partner</span></a>
</div>

<div class="btn-sidebar skinny">
  <a href="#"><span class="td_btn td_btn_md td_outlined_btn">Button</span></a>
  <a href="#"><span class="td_btn td_btn_md td_outlined_btn">Button Partner</span></a>
</div>