title: Keep div height in line with text that has been rotated
body: <p>I have a div with a heading inside it that has been transformed with CSS to be rotated -90 degrees so it appears vertically.</p>
  
  <pre><code>#mydiv h2 {
      writing-mode: tb-rl;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
      white-space: nowrap;
      width: 20px;
      height: 20px;
  }
  </code></pre>
  
  <p>The problem is that the containing div doesn't stretch with the text; instead, the text floats outside the div box.</p>
  
  <p>How can I make the div stretch with the text?</p>