100% Höhenblock mit vertikalem Text

Ich habe einen Block mit variabler Höhe, in den ich einen anderen Block mit 100% Höhe und vertikalem Text (Richtung von unten nach oben) einfügen und ihn auf der linken Seite des äußeren Blocks stapeln möchte. Gibt es eine Möglichkeit, dies mit CSS-Transformationen zu erreichen, jedoch ohne Breiten- und Höhenberechnungen in JS?

Folgendes könnte ich bisher erreichen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.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;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

Sie können sehen, dass die berechnete Breite des inneren Blocks mit der Textbreite vor der Drehung übereinstimmt.

AKTUALISIEREN:

Hier ist das Bild von dem, was ich am Ende haben möchte:

Es ist ein horizontaler Streifen mit Elementen, die auf der linken Seite gestapelt sind, und einem vertikalen Headerblock. Die Höhe des Streifens ist variabel, daher sollten die Elemente angepasst werden und der Text der Kopfzeile sollte zentriert bleiben.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage