How can I fully control the rotation of a div using CSS?

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.

Right now I'm using the code below, even though I've been trying to use other methods.

My aim is to reduce the width of the left cell and make it more suited to the font, freeing space. 

![Screenshot](https://i.stack.imgur.com/mdizq.png)

My CSS:

```css
.rotate {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode: lr-tb;
}

```

And my HTML:

```html
<table class="TABELLA1" width="400px" align="left">
    <tr height="90px">
        <td width="1%">
            <p id="idcliente" class="A8BL rotate">C</p>
        </td>
        <td width="99%">
            <div>
                <div class="A8BL">
                    FACTORY 1<br>
                    253190 MILANO (IT)<br>
                </div>
                <div class="A8L">
                    Tel. 02 669172284<br>
                    e-mail: info@alufaoj.it
                    Cod. Fisc. <br>
                    e Partita IVA 2251364245341126
                </div>
            </div>
        </td>
    </tr>
</table>
```