Как получить ту же высоту на дисплее: table-cell

Question

У меня есть 3 кнопки, и я хочу, чтобы она была одинаковой высоты. Также я хочу, чтобы она была одинаковой высоты в разрешении табуляции. Я хочу, чтобы это было достигнуто в CSS.

Может ли кто-нибудь рассказать мне, как я могу достичь этого.

HTML:

<div class="content"> 
    <p>It's easy to become a member. </p> 
    <p> Join today online </p> 
    <div class="btn-wrap"> 
     <div class="row"> 
      <div class="col"><a href="">Find Nearest Agent</a></div> 
      <div class="col"><a href="" >Join Now</a></div> 
      <div class="col"><a href="" >Download the App</a> </div> 
     </div> 
    </div> 
</div> 

CSS:

.content { 
    width:75%; //there is a reason to use 75% here coz I have to place an image for remaining 25%. 
} 

.btn-wrap { 
    display:table; 
    border-collapse: separate; 
    width:100%; 
    overflow: hidden; 
} 

.row { 
    display:table-row; 
} 

.col { 
    display:table-cell; 
    padding: 0 0.5% 0; 
    width:32%; 
    float: left; 
} 

a { 
    font-size: 20px; 
} 

input[type="submit"], a { 
    border: 0 none; 
    box-sizing: border-box; 
    display: block; 
    font-family: "Lato",Arial,sans-serif; 
    font-size: 17px; 
    font-style: normal; 
    font-weight: 900; 
    margin: 0; 
    padding: 20px 10px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    background-color: #ff0; 
    color: #1d6221 
} 

JSFiddle: http://jsfiddle.net/qwdduc7z/5/

Answer 1

HTML

<div class="content"> 
    <p>Easy to become number</p> 
    <p>Join Now </p> 
    <div class="btn-wcircle-wrap"> 
     <div class="row"> 
      <a href="" class="col">Find Nearest Agent</a> 
      <a href="" class="col btn yellow mt">Join Now</a> 
      <a href="" class="col btn red mt">Download the App</a> 
     </div> 
    </div> 
</div> 

CSS

.content { 
    width:75%; 
} 

.btn-wcircle-wrap { 
    display: table; 
    height: 100px; 
} 
.row { 
    display: table-row; 
} 
.col { 
    display: table-cell; 
    padding: 0 0.5%; 
    width: 32%; 
} 
a { 
    border: none; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
    font-family: "Lato",Arial,sans-serif; 
    font-size: 17px; 
    line-height: 1.5; 
    font-style: normal; 
    font-weight: 900; 
    text-decoration: none; 
    text-transform: uppercase; 
    background-color: #ff0; 
    color: #1d6221; 
} 

"чтобы имитировать оригинальный пример"

.content 
{ 
    width:75%; 
} 
.btn-wcircle-wrap { 
    display:table; 
    width:100%; 
} 
.row { 
    display:table-row; 
} 
.col { 
    display:table-cell; 
    padding: 20px 0.5%; 
    width:32%; 
    text-align: center; 
    background-color: #ff0; 
    box-shadow: 5px 0 0 0 white inset; 
    // or use 
    // border: 5px solid white; 
} 

a { 
    box-sizing: border-box; 
    vertical-align: text-top; 
    font-family: "Lato",Arial,sans-serif; 
    font-size: 17px; 
    line-height: 1.5; 
    font-style: normal; 
    font-weight: 900; 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #1d6221; 
} 

http://jsfiddle.net/tksek87m/

Answer 2

Добавить height: 75px; в input[type="submit"], a{. например. here