title: Two divs aligned vertically next to an image
body: <p>I want to have an avatar image with two divs on its right that are vertically aligned to it.</p>
  
  <p><a href="https://jsbin.com/qafiroquve/1/edit?html,css,output" rel="noreferrer">https://jsbin.com/qafiroquve/1/edit?html,css,output</a></p>
  
  <p>I've read so many posts about this, but none of them seems to help me.</p>
  
  <p>What is the best approach to having the image on the left with 30% of the main div's (<code>header</code>) width, and the <code>info</code> div with 70% of it?</p>
  
  <p>If either of the <code>info</code> divs (<code>name</code> or <code>position</code>) has too much text, I want the <code>info</code> div to get vertically aligned to the image on its left.
  I also want this <code>info</code> div to have a margin with the image.</p>
  
  <p>I've tried so many options: <code>float: left</code> on <code>avatar</code> div, <code>display: inline-block</code> on both <code>avatar</code> and <code>info</code>, <code>width: 30% and 40%</code> . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.</p>