title: Is there a CSS only way to rotate 90 deg in responsive design?
body: <p>I have a (nice?) responsive design of a table (done with flex) - if the display is wide enough it looks like this (labels 'c' and 'd' rotated -90):</p>
  
  <pre><code>|aaaaaaa|bbbbbbb|c   |d   |
  |       |       |c   |d   |
  |       |       |c   |d   |
  +-------+-------+----+----+
  |   1111|   2222|3   |4   | 
  +-------+-------+----+----+
  |   xxxx|   yyyy|z   |?   |
  </code></pre>
  
  <p>if it gets (to) small it changes to:    </p>
  
  <pre><code>|aaaaaaa|bbbbbbb|
  |c      |d      |
  |c      |d      |
  |c      |d      |
  +-------+-------+
  |   1111|   2222|
  |3      |4      |   
  +-------+-------+
  |   xxxx|   yyyy|
  |z      |?      |
  </code></pre>
  
  <p>so far so fine, and working, and was a playing around with transform and padding.</p>
  
  <p><em>EDIT: the trick was to make all rotated labels the same height and width;</em></p>
  
  <p>Lets say - now I have to put a background to the labels - the problem is, that the rotated divs for c&amp;d have a fixed height and width that fits to my logic.</p>
  
  <p><em>EDIT: the problem is that translated text do not fit in any more;</em></p>
  
  <p>But they should have:</p>
  
  <pre><code>width: 100%parent_height;
  height: 100%parent_width;
  </code></pre>
  
  <p>not to talk about <code>top</code> and <code>left</code>      </p>
  
  <p>My jQuery solution looks like this (just trans H and W):</p>
  
  <pre><code>rotate90=()-&gt;
      $('.rotate90').each (i,e) =&gt;
          $e=$(e)
          $e.css(width: '100%', height: '100%')
          [w,h]=[$e.outerWidth(),$e.outerHeight()]
          $e.outerWidth(h).outerHeight(w)
          .css(top: (h-w)/2, left: (w-h)/2)       
  </code></pre>
  
  <p>and call it when needed</p>
  
  <pre><code>$(window).load( =&gt;
      rotate90()
      $(window).on('resize.rotate90', rotate90)   
  )
  </code></pre>
  
  <p>css behind is just simple</p>
  
  <pre><code>.rotate90 {
    transform: rotate(-90deg);
    text-align: left;
    width:100%;
    height:100%;
    position: absolute;
  }
  </code></pre>
  
  <p><strong>But</strong> is there a way to to that w/o scripting?    </p>
  
  <p><a href="https://jsfiddle.net/95qur86t/1/" rel="nofollow noreferrer">Fiddle</a>
  <a href="https://jsfiddle.net/95qur86t/4/" rel="nofollow noreferrer">Fiddle 2 with different width and long text</a></p>