title: HTML CSS: aligning elements Vertically on one line
body: <p>I have a user logged-in header which shows a greeting, a thumbnail of the user's profile picture (always a fixed size - 30x30) and a logout link. There are vertical separators between each piece of text and the photo.</p>
  
  <pre><code>&lt;span&gt;Hello [username]&lt;/span&gt;
  &lt;span class="divider"&gt;&lt;/span&gt;
  &lt;img src="/photo.jpg" /&gt;
  &lt;span class="divider"&gt;&lt;/span&gt;
  &lt;a href="/logout"&gt;Logout&lt;/a&gt;
  </code></pre>
  
  <p>Here is the result I am going for:</p>
  
  <p><img src="https://i.stack.imgur.com/EoZq6.png" alt="Desired result"></p>
  
  <p>.. but the height of the picture pushes all the other elements 'down' so I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/Px0fR.png" alt="Actual result"></p>
  
  <p>How do I align these vertically - is there a way to do it without hard-coding px margins/padding for each element?</p>