How to rotate text 90 degrees inline

Question

How do I rotate text 90 degrees without using the style sheet? I have placed the following instruction in the header area of the page:

<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>

Then I placed the following around the paragraph in question.

<div id="rotate-text">
<p>My paragraph</p>
</div>

But its not working and hence my question.

Answer 1

Here is a small visual example:

#rotate-text {
   width: 25px;
   transform: rotate(90deg);
}

<div id="rotate-text">
  <p>My paragraph</p>
</div>