Two divs aligned vertically next to an image - css

Question

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

Answer 1

You can use either table-cell how #w3debugger suggested or you can take advantage of a quick css hack to align vertically:
.yourclass{
position:absolute;
top: 50%;
transform: translateY(-50%)
}
But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,
I edited your example:
HTML:
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div><div class="info">
<div class="name">Important person here </div>
<div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
</div>
</div>
CSS:
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
position: relative;
}
.avatar img {
width: 30%;
border-radius: 50%;
}
.info{
box-sizing: border-box;
padding: 0 40px;
width: 70%;
position:absolute;
right: 0;
vertical-align: top;
top: 50%;
transform: translateY(-50%)
}
Live preview:
https://jsbin.com/gogewefizo/1/edit?html,css,output

Answer 2

Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.
Please check the code below.
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
display: table;
}
.avatar img {
width: 150px;
}
.avatar,
.info {
display: table-cell;
vertical-align: middle;
}
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div>
<div class="info">
<div class="name">Important person here</div>
<div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
</div>
</div>