How to get same height in display:table-cell - html

Question

I have 3 buttons and I want that to be of same height.Also I want that to be of same height in tab resolution as well.I want this to be achieved in css.
Can anyone please tell me how can i achieve that.
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">Find Nearest Agent</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

Add height: 75px; to input[type="submit"], a{. eg. here

Answer 2

HTML
<div class="content">
<p>Easy to become number</p>
<p>Join Now </p>
<div class="btn-wcircle-wrap">
<div class="row">
Find Nearest Agent
Join Now
Download the App
</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;
}
"to mimic the original example"
.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/