title: Set child's width to the height of the parent in pure CSS
body: <p>Can I set the <em>width</em> of a <code>child-div</code> equal to that of it's <code>parent-div</code> <em>height</em> in pure CSS?</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/evk9a9ma/" rel="nofollow">JsFiddle Demo</a></p>
  </blockquote>
  
  <p>So far, I have been doing in jQuery:</p>
  
  <pre><code>$("#child-div").width($("#child-div").parent().height());
  </code></pre>
  
  <p>Is this achievable in Pure CSS? For some reasons, I need this to be in Pure CSS. 
  Here's my html: </p>
  
  <pre><code>&lt;div id="parent-div"&gt;
      &lt;div id="child-div&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#parent-div{
      background:#ddd;
      height:80%;
      width:30%; position:absolute;
  }
  
  #child-div{
      position:relative;
      background:#333;
      color:#FFF;
      transform: rotate(270deg);
      transform-origin: 0 0 ;
      top:100%;
      height: /* What ???? */;
  }
  </code></pre>
  
  <p>Any tricks?</p>