css - Rotate Element Within H2 -

im trying rotate <span> within <h2> 90 degrees.

right if set rotate nothing happens - if add display:block span rotates. problem pushes rest of h2 on next line.

is there way have h2 display on 1 line span rotated in middle of it?

here's how should

html:

<h2>join <span class="flip-text">with</span><span class="flip-text">your</span> family</h2> 

css:

span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:dximagetransform.microsoft.basicimage(rotation=3); -ms-filter: progid:dximagetransform.microsoft.basicimage(rotation=3);} 

just christopher suggesting, display: inline-block way go: http://jsfiddle.net/x85b6/

<h2>join<span>with<br />your</span>family</h2>  h2 {     font-size: 60px;     text-transform: uppercase; } h2 span {     font-size: 15px;     line-height: 16px;     display: inline-block;     position: relative;     bottom: 5px;     -webkit-transform: rotate(-90deg);     -moz-transform: rotate(-90deg);     -ms-transform: rotate(-90deg);     -o-transform: rotate(-90deg);     filter: progid:dximagetransform.microsoft.basicimage(rotation=3);     -ms-filter: progid:dximagetransform.microsoft.basicimage(rotation=3); }