Как выровнять два элемента в одной строке без изменения HTML

У меня есть два элемента на одной строке, плавающие влево и вправо.

<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>

Мне нужно, чтобы element2 выровнялся рядом с element1 с отступом примерно 10 пикселей между ними. Проблема в том, что ширина element2 может меняться в зависимости от содержимого и браузера (размер шрифта и т. Д.), Поэтому он не всегда идеально сочетается с element1 (я не могу просто применить margin-right и переместить его).

Я тоже не могу поменять разметку.

Есть ли единый способ выстроить их в ряд? Я попробовал margin-right с процентом, я попробовал отрицательное поле для element1, чтобы приблизить element2 (но не смог заставить его работать).