title: How can I fully control a <div> rotation
body: <p>How can I fully control the rotation of a div using CSS?</p>
  
  <p>I've been struggling with this for a while now, but nothing seems to work properly. I'm using this for a document that needs to be as concise as possible and every time that I need to rotate a div inside a table cell, the width of that cell becomes uncontrollable, linked to the length of the word written inside.</p>
  
  <p>Right now I'm using the code below, even though I've been trying to use other methods.</p>
  
  <p>My aim is to reduce the width of the left cell and make it more suited to the font, freeing space. </p>
  
  <p><img src="https://i.stack.imgur.com/mdizq.png" alt="Screenshot"></p>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.rotate {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      writing-mode: lr-tb;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="TABELLA1" width="400px" align="left"&gt;
      &lt;tr height="90px"&gt;
          &lt;td width="1%"&gt;
              &lt;p id="idcliente" class="A8BL rotate"&gt;C&lt;/p&gt;
          &lt;/td&gt;
          &lt;td width="99%"&gt;
              &lt;div&gt;
                  &lt;div class="A8BL"&gt;
                      FACTORY 1&lt;br&gt;
                      253190 MILANO (IT)&lt;br&gt;
                  &lt;/div&gt;
                  &lt;div class="A8L"&gt;
                      Tel. 02 669172284&lt;br&gt;
                      e-mail: info@alufaoj.it
                      Cod. Fisc. &lt;br&gt;
                      e Partita IVA 2251364245341126
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>