Вертикальное выравнивание двух фрагментов текста с разными размерами шрифта с помощью CSS

В верхней части моей страницы я хочу, чтобы заголовок страницы был выровнен по левому краю экрана, а короткое навигационное меню было выровнено по правому краю экрана. Я могу добиться этого, используя float, но два элемента имеют разные базовые линии, т.е. базовая линия текста выглядит по-разному. Есть ли способ заставить это работать с помощью css? У меня есть пример того, что я пытаюсь сделать с jsfiddle http://jsfiddle.net/nBPCG/63/