html - btns(作为定位标记)不在同一高度，但并排放置

好的，我有两个按钮需要并排放置。我明白了。但是右边的“按钮”比左边的按钮高。为什么？我相信这是因为我的“按钮”右边有两行文字。我的支持者不会对包含两行文本的按钮感到满意。有谁知道如何做得更好？

我将代码放在jsfiddle中：http://jsfiddle.net/energeticpixels/k7awcfts/

这是我的代码：

<div id='tonyzBTNs'>
            <a id='regCourse' class='btn' href='https://cloudlms.slhc.serco-na.com' target='_blank'>Register for Course</a>
            <a id='regTest' class='btn' href='https://www.atrrs.army.mil/atrrscc/courseInfo.aspx?fy=2016&amp;sch=910&amp;crs=4E-F33%2f645-F17+(DL)&amp;crstitle=ARMY+ELECTRICAL+EXPLOSIVE+SAFETY+(CERT)&amp;phase=' target='_blank'>Register for Exam<span style="font-size: 10px;"><br />(after completing the course)</span></a>
        </div>

和CSS：

#tonyzBTNs {
              margin-top: 20px;
              margin-bottom: 20px;
            }
            #tonyzBTNs .btn {
              text-align: center;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 18px;
              font-weight: bold;
              text-decoration: none;
            }
            #tonyzBTNs #regCourse {
              background-color: #9EB95C;
              border: 2px solid #708542;
              border-radius: 10px;
              padding: 10px;
              color: black;
            }
            #tonyzBTNs #regTest {
              background-color: #C54F4D;
              border: 2px solid #6A4346;
              border-radius: 10px;
              padding: 1px 10px 1px 10px;
              color: white;
              display: inline-block;
            }

最佳答案

#tonyzBTNs .btn {
    ...
    vertical-align: top;
    display: inline-block;
}

Demo