How can I get the Twitter and Facebook buttons to horizontally align?

Using the html they allow you to generate, I've added Twitter and Facebook "Like" buttons to my site. They align vertically just fine, but that takes up too much space - I'd rather align them horizontally. So I removed the "div" from the facebook button. This indeed places the facebook button to the right of the Twitter button, but a little bit askew/akimbo.

Here's the html in its current vertical orientation (twitter on top, facebook below):

    <header>
        <div class="content-wrapper">
            <h1>Duckbilled Platypi of the World Unite!</h1>
            <div class="float-left">
                <p class="site-title">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbillplatypi.com" data-text="Czech out these Duckbilled Platypi" data-via="W_Epominandes_Blab">Tweet</a>
                    <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>

                    <div class="fb-like" data-href="http://www.duckbilledplatypi.com" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"></div>

...and the Javascript (in context) just before the html shown above:

</head>
<body>
    <div id="fb-root"></div>
    <script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
    <header>

What adjustment need I make to get them to look "straightedged"?

UPDATE

Changing it to this:

<div display:inline-block vertical-align:top>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbilledplatypi" data-text="Duckbilled Platypi are awesomer by half again as much as Tapirs!" data-via="BClayShannon">Tweet</a>
    <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
<div display:inline-block vertical-align:top class="fb-like" data-href="http://www.duckbilledplatypi" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"></div>

...did nothing.

Nor did using this instead:

display="inline-block" vertical="align-top"

(which is, I assume, what it should be for html, rather than the CSS-style I had before)

UPDATE

A related problem (clicking the cute little icons don't do anything/go anywhere) is defined here: http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+

Solution

Put them both in wrapper divs with display:inline-block and use vertical-align:top (or center) to align them however you want. If you want further finetuning, put margin on the wrapper div with a few pixels to have pixel-perfect positioning.