Display icons and text on the same line

Question

I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.

How do I do this?

My code is in fiddle here http://jsfiddle.net/pnX3d/

    <div class="grid_5" id="social_icons">
        <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
        <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
        <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
        <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    </div>

    <nav class="topmenu omega">
        <ul>
        <li><a href="#">Home</a> |</li>
        <li><a href="#">About Us</a> |</li>
        <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>

Answer 1

I have achieved that with the following code:

.container-header{
    line-height: 1.22;
}
#social_icons {
    padding: .5em;
    display: inline-block;
}

.topmenu li {
     display:inline-block;
     font-size: 1.5em;
     text-align: right;
}
.topmenu.omega{
     float:right;
}
ul{
     margin: 0;
}
li>a
{
    font-size: 20px;
}

<div class="container-header">
  <div class="grid_5" id="social_icons">
	<a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a>
	<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a>
	<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a>
	<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

  </div>

  <nav class="topmenu omega">
	<ul>
	<li><a href="#">Home</a> |</li>
	<li><a href="#">About Us</a> |</li>
	<li><a href="#">Cheeses</a></li>
	</ul>
  </nav>
</div>

Answer 2

Add float: left to #social_icons and .topmenu li.

Here's a demo: http://jsfiddle.net/ZsJbJ/.

Hope that helps!