Вертикального выравнивания SVG с другими элементами HTML

Question

мне нужно выравнивать SVG элемент в линии (справа) другой элемент в строке/промежутке, и не могу найти правильную формулу. Если я не ошибаюсь, ответ на этот вопрос related SO question не удастся, если SVG не находится слева.

Вот jsfiddle illustration. Благодарен за помощь.

<div style="border: 1px solid black; height: 100px; width: 200px; vertical-align:top;"> 
    <span height=100 float=left><p>text on left</p></span> 
    <span height=100 float=right> 
     <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin"> 
      <rect x="0" y="0" width="100" height="100" style="fill: red;" /> 
     </svg> 
    </span> 
</div> 

Answer 1

мне удалось получить свои пролеты рядом друг с другом здесь: http://jsfiddle.net/J8sPs/6/

Вот окончательный код:

HTML:

<div> 
    <span class="flt"><p>text on left</p></span> 
    <span class="frt"> 
     <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin"> 
      <rect x="0" y="0" width="100" height="100"/> 
     </svg> 
    </span> 
</div> 

CSS:

div { 
    border: 1px solid black; 
    height: 100px; 
    width: 200px; 
    vertical-align: top; 
} 

span { 
    width: 100px; 
    height: 100px; 
} 

.flt { 
    float: left; 
} 

.frt { 
    float: right; 
} 

rect { 
    fill: red; 
}