title: Rotating text and aligning it in CSS?
body: <p>What is the preferred solution to rotating then aligning text to the side of some content?</p>
  
  <p>Example:
  <a href="http://jsfiddle.net/nVtpz/" rel="noreferrer">http://jsfiddle.net/nVtpz/</a></p>
  
  <pre><code>&lt;style&gt;
  .wrapper {
      width: 100px;
      height: 100px;
      border: 1px solid #009;
      margin: 50px;
  }
  .text
  {
      border: 1px solid #900;
        -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
  
  }
  .image {
      border: 1px solid #090;
  }
  &lt;/style&gt;
  
  &lt;div class="wrapper"&gt;    
      &lt;div class="text"&gt;
          Text to rotate
      &lt;/div&gt;
      &lt;div class="image"&gt;
          &lt;img src="http://lorempixel.com/100/100"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the text to be aligned next to the bottom left corner of the image (but not on top of the image, i.e. without float)</p>
  
  <p>I guess I could use <code>position: relative; bottom: 0px</code> or something similar, but is there a better way?</p>