title: 100% height block with vertical text
body: <p>I have a block of a variable height in which I want to put another block with 100% height and vertical text (bottom-to-top direction) and stack it to the left side of the outer block. Is there a way to achieve it with CSS transforms but without width and height calculations in JS?</p>
  
  <p><img src="https://i.stack.imgur.com/KW67D.png" alt="Sketch"></p>
  
  <p>This is what I could get so far:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .block1 {
      border: 4px solid #888;
      height: 120px;
      width: 200px;
  }
  .block2 {
      height: 100%;
      border: 4px solid red;
  }
  .msg {
      display: inline-block;
      white-space: nowrap;
      font-family: Verdana;
      font-size: 14pt;
      -moz-transform: rotate(-90deg);
      -moz-transform-origin: center center;
      -webkit-transform: rotate(-90deg);
      -webkit-transform-origin: center center;
      -ms-transform: rotate(-90deg);
      -ms-transform-origin: center center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="block1"&gt;
          &lt;table class="block2"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class="msg"&gt;Hi there!&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zmgCf.png" alt="My test"></p>
  
  <p>You can see that the inner block's computed width is the same as the text width before rotation.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here is the picture of what I want to get in the end:</p>
  
  <p><img src="https://i.stack.imgur.com/9ooAu.png" alt="enter image description here"></p>
  
  <p>It's a horizontal stripe with items stacked to its left side, and with a vertical header block. Stripe's height is variable, so items should adapt and the header's text should remain centered.</p>