CSS Divs и Поворот текста

Я боролся со следующим макетом и могу приблизиться, но либо мои divs верны, и мой текст неуместен, либо наоборот. Вот что я хочу, представьте, что максимизированный браузер...

+----------------------------+
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
|    |#|    |@@@@|    |&|    |
+----------------------------+

Вся страница имеет белый фон. Тогда мне просто нужно три divs, которые окрашены в один цвет, черный, например, 100% высоты. Таким образом, в моем хроническом чертеже ASCII первый div - это "столбец", заполненный символами "#", второй div - столбец, заполненный символами "@", а третий div - столбец, заполненный символами "&".

Над средним столбцом (символы "@") я хочу сложить над ним фрагмент текста, который поворачивается на 270 градусов. Только одна строка строки длиной 10 символов, вертикально и горизонтально (или даже горизонтально в порядке).

Здесь мой CSS - имейте в виду, что здесь есть барахло, поскольку я прошел через множество представлений перед публикацией. Опять же, я могу получить свои divs достаточно легко, но тогда текст неправильный или если я получу текст правильно, divs неправильно.

.container-left
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        margin: 1px;
        padding: 1px;
        width: 5px;
}

.container-middle
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        margin: 0px;
        padding: 0px;
        width: 50px;
        z-index: 1;
        overflow: none;

        display: -ms-flexbox;
        -ms-flex-pack:center;
        -ms-flex-align: center;

        display: -moz-box;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: box;
        box-pack: center;
        box-align: center;
}

.container-right
{
        height: 100%;
        background-color: #000;
        display: inline-block;
        float: left;
        margin: 1px;
        padding: 1px;
        width: 5px;
}

Мой HTML...

<div style='margin: 0 auto;'>
    <div class='container-left'></div>
    <div class='container-middle'>
        <p class='rotate'>This text should be rotated</p>
    </div>
    <div class='container-right'></div>
</div>