title: Howto CSS: two elements, both vertically centered, floating to opposite sides (Example)
body: <p>To Put it simple, I would like a header with two elements floating to each side and vertically centered:</p>
  
  <p><img src="https://i.stack.imgur.com/kxAMX.jpg" alt="enter image description here"></p>
  
  <p>I started out with doing this with non-floating elements and managed to make <a href="http://jsbin.com/azaxus/1/edit" rel="nofollow noreferrer">this example</a>.</p>
  
  <p>But once I add the <code>float:left</code> or <code>float:right</code> the vertical centering is lost (I understand why, because it's not part of the flow anymore)</p>
  
  <p>I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.</p>
  
  <p>Thanks in Advance!</p>