Vertical align of img+inline-block inside a div - css

Question

I am trying to vertically align an img and an inline bloc div, but can't figure how.
Here's a JSFiddle link to what I have done :
https://jsfiddle.net/vat2w1s3/4/
As you may see, the green image and the orange div are not vertically aligned. I don't know how to do this.
More over, the padding doesn't work for the orange bloc (due to the position: asbolute right?)
Anyone has an idea?
Here's the code:
HTML:
<header> <!-- RED -->
<div class="bloc-div">
<a href="#"> <!-- BLUE -->
<!-- GREEN -->
<img class="img" src="https://account.socialbakers.com/default_user.png" alt="some photo">
<!-- ORANGE -->
<div class="text-div">
<span class="span1">SOMETHING BIG</span><br/>
<span class="span2">Small caption</span>
</div>
</a>
</div>
</header>
<!-- BODY IS GRAY -->
and the CSS:
body {background: gray;}
a, a:hover, a:active, a:focus { color: inherit; text-decoration: inherit; }
header {
background: red;
width: 300px;
height: 100%;
position: fixed;
}
.bloc-div a {
display: block;
background: blue;
padding: 1em;
}
.img {
background: green;
display: inline-block;
width:50px;
height:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
padding:5px;
}
.text-div {
background: orange;
display: inline-block;
text-align: right;
/* Stick the orange bloc to the right */
position: absolute;
right: 0;
}
.span1 {
font-size: 1.3em;
}
.span2 {
font-size: 0.8em;
}

Answer 1

I propose you a simple solution. You can just add a margin to the orange box (text-div):
margin-top: 10px;
The two elements are in the same box but they are not of the same size, it's the easiest fix.
By the way, the padding works for me, but it makes the orange box bigger.
NB: I use Chrome, could it be a browser issue?