Why does the button not match the position with the textboxes vertically - html

Question

JsFiddle: http://jsfiddle.net/7yfLLkds/
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
height: auto;
overflow: hidden;
width: 100%;
}
/* COLUMN SETUP */
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
.span_smaller {
width: 39%;
word-wrap: break-word;
}
.onlySmallPadTop {
padding: 5% 0 0 0;
}
.styledFromDirHolder {
height: 30px;
width: calc(90% + 5px);
position: relative;
display: inline-block;
padding-left: 2%;
}
.styledTBFromDir {
width: 100%;
height: 100%;
padding-right: 12%;
padding-left: 5px;
background: #E8E8E8;
opacity: 1;
box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
box-sizing: border-box;
}
.styledFromDirGeoLoc {
height: 100%;
width: 10%;
background: url('../theImages/geoLoc.png') no-repeat 50% 50%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background-size: auto;
}
.styledFromDirGeoLoc:hover {
background: url('../theImages/geoLoc2.png') no-repeat 50% 50%;
}
.percPadLeft {
padding: 0 0 0 2%;
}
.styledTB {
padding-left: 5px;
background: #E8E8E8;
opacity: 1;
border: none;
outline: none;
right: 35px;
box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchBDir {
height: 30px;
width: 90%;
}
.styledBtn {
border: 0;
background: #EA772B;
display: block;
box-shadow: 0px 5px #BC490A, 0px 8px 10px rgba(148, 148, 148, 0.5);
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.styledBtn:hover {
background: #00599B;
box-shadow: 0px 5px #01355D, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.styleDirection {
font-size: 12px;
padding: 0 8px 0 8px;
height: 30px;
line-height: 30px;
color: #FFF;
}
<div class="section group">
<div class="col span_smaller onlySmallPadTop">
<span>From:</span>
<br />
<div class="styledFromDirHolder">
<input type="text" id="fromAdd" class="styledTBFromDir" />
<span id="btnGeo" title="Get My Location" class="styledFromDirGeoLoc"></span>
</div>
</div>
<div class="col span_smaller onlySmallPadTop">
<span>To:</span>
<br />
<span class="percPadLeft"></span>
<input type="text" id="toAdd" class="styledTB searchBDir" />
</div>
<div class="col onlySmallPadTop">
<span></span>
<br />
<input type="button" id="dirBtn" class="styledBtn styleDirection lightLinks" value="Get Directions" />
</div>
</div>
In Chrome and IE 11, it shows correctly but in Firefox, the button goes below.

Answer 1

Add vertical-align: middle; to .col and it should sort out your problem
Updated fiddle
Because you don't have any text in your span above your button, the calculated height of the button div seems to be smaller than the other divs (put some text in and it will also fix the problem) and by default inline-block elements are vertical aligned to the baseline (which is why your button div is lower).

Answer 2

The line break above the button (<br />) is causing an issue. You shouldn't need it, remove it and apply a margin or possibly position:relative;top:10px; or similar to the button in order to achieve a consistant experience across browsers.
Try not to use line breaks for spacing elements other than text/paragraphs etc, they are too inconsistent and it is not the correct or best use of them :)

Answer 3

Remove the display: block; property on input#dirBtn.

Answer 4

Remove the display:block from the .styleBtn
http://jsfiddle.net/7yfLLkds/3/