[解決済み] HTMLを変更せずに2つの要素を同じ行に揃える方法

質問

同じ行に左浮きと右浮きの2つの要素があります。

<style type="text/css">
    #element1 {float:left;}
    #element2 {float:right;}
</style>

<div id="element1">
    element 1 markup
</div>
<div id="element2">
    element 2 markup
</div>

element1の隣にelement2を10ピクセルほどパディングして並べたいのです。問題は、element2の幅がコンテンツやブラウザ（フォントサイズなど）によって変化するため、element1と完全に並ぶとは限らないことです（margin-rightを適用して移動させることができない）。

また、マークアップを変更することもできません。

一律に並べる方法はないのでしょうか？margin-rightをパーセントで指定してみたり、要素1のマージンをマイナスにして要素2を近づけてみたり（でもうまくいきませんでした）。

どのように解決するのですか？

使用方法 display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

例