html button has excess whitespace above due to text content - html

Question

So I have the following code below.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
}
.inner2 {
border: 1px solid black;
}
.rect {
width: 0%;
height: 20px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: black;
font-size: 12;
}
.sendreceiveBtn {
height: 25px;
width: 100%;
font-size: 12px;
max-height: 25px;
}
<div>
<div class="inlineItems" id="progBtnBar">
<div class="innerDiv1">
<div class="inner2">
<div id="myProgress">
<div class="rect">0%</div>
</div>
</div>
</div>
<div class="innerDiv2">
<button class=sendreceiveBtn>Transmit</button>
</div>
</div>
</div>
I need to line up a button vertically with another div, with both as inline-block inside another div, so they end up next to eachother, preferably the exact same size. However, something about the button is pushing it down a bit. Nothing I have done so far has been able to change this EXCEPT for increasing the font of the text in the button. What is making this space, and how can I get these to line up?

Answer 1

this is the culprit:
.rect {
line-height: 30px;
}

Answer 2

Vertical align allows multiple siblings to share the same vertical position.
.innerDiv1 {
display: inline-block;
width: 45%;
border-right: 1px solid;
padding-right: 5px
vertical-align: middle;
}
.innerDiv2 {
display: inline-block;
width: 45%;
padding-left: 5px;
vertical-align: middle;
}
You can see a working example in the following jsfiddle: https://jsfiddle.net/gkotxdt7/

Answer 3

Replace Your existing CSS with below:
.innerDiv1 { display: table-cell; width: 45%; border-right: 1px solid; padding-right: 5px; vertical-align: middle; }
.innerDiv2 { display: table-cell; width: 45%; padding-left: 5px; vertical-align: middle; }
.inner2 { border: 1px solid black; }
.rect { width: 0%; height: 20px; background-color: #4CAF50; text-align: center; line-height: 30px; color: black; font-size: 12; }
.sendreceiveBtn { min-height: 25px; width: 100%; font-size: 12px; height: auto; }
#progBtnBar{
display: table;
width: 100%;
height: auto; }
Thats it. It will resolve the issue.