Why I can't align two buttons - html

Question

I have problem, I can't align two buttons in one line.
I tried to set padding of span class pptext2 but without success.
Here is code
http://jsfiddle.net/71782p4L/1/
HTML
<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->
CSS
.ppdiv{
padding-top:22px;
padding-left: 19px;
}
.ppdiv img{
padding:10px;
font-size: 20px;
}
.ppenvelope{
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.pptext{
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
}
.pptext2{
display: inline-block;
color:#4c6974;
padding-top: 15px;
padding-bottom:13px;
padding-left: 13px;
}

Answer 1

I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.
HTML:
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
</button>
<button class="pptext">PRIVATE MESSAGE</button>
</div>
CSS:
.ppdiv{
overflow: hidden;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img{
padding:10px;
}
.pptext{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}

Answer 2

Use vertical-align: middle; on both buttons.
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}

Answer 3

https://jsfiddle.net/71782p4L/2/
Here you are.
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}