JSFiddle - React, Tailwind, and code Playground

HTML

<!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>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there! dfgs dg</div>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

CSS

.block1 {
    border: 4px solid #888;
    height: 320px;
    width: 300px;
}
.block2 {
    height: 100%;
    position:relative;
}

.block2 td:first-child {
    position:relative;
    width:35px;
    border: 4px solid red;
}

.msg {
    display: 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;
    width:30px;
    bottom:10px;
    position:absolute;
}