Вертикальное выравнивание img + inline-block внутри div

Question

Я пытаюсь вертикально выровнять img и inline bloc div, но не могу понять, как.

Вот ссылка JSFiddle к тому, что я сделал: https://jsfiddle.net/vat2w1s3/4/

Как вы можете видеть, зеленый образ и оранжевый ДИВ не выровнены по вертикали. Я не знаю, как это сделать. Более того, прокладка не работает для оранжевого блока (из-за position: asbolute справа?)

У кого-нибудь есть идеи?

Вот код:

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 --> 

и 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

Я предлагаю вам простое решение. Вы можете просто добавить маржу в оранжевом поле (текст-дел):

margin-top: 10px; 

Эти два элемента находятся в одной коробке, но они не имеют такого же размера, это самый простой исправить. Кстати, прокладка работает для меня, но она делает оранжевую коробку больше.

NB: Я использую Chrome, это может быть проблема с браузером?