２つに分けて左位置を縦書きで固定

フレームを作ってを2分割。片方を縦書きで表示させたい場合に少し悩んだのでできたもの。


<!DOCTYPE html>
<html lang="ja">
<head>
    <title>縦書きポジションに関するサンプル</title>

    <style type="text/css">
        /* 初期化 */
        * {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            font-size: 100%;
            vertical-align: baseline;
            box-sizing: border-box;
        }
        /* ２つに分けるフレーム */
        .frame {
            display: flex;
        }
        /* 例として分かりやすいように入れてみたよ */
        .leftside, .rightside {
            color: #333;
            border: 1px solid #333;
            text-align: center;
        }
        /* 左側の幅 とりあえず固定 */
        .leftside {
            width: 64px;
        }
        /* 左側の縦書き設定 */
        .inside {
            /*  */
            position: absolute;
            /* 縦表示 */
            transform: rotate(90deg);
            /* 縦位置を制御 */
            top: 300px;
            /* 左位置制御 */
            left: 16px;
            /* 折り返しなし */
            white-space: nowrap;
        }
        /* 右サイド */
        .rightside {
            width: calc(100% - 64px);
            height: 400px;
            padding: 1em;

        }
    </style>
</head>

<body>
    <div class="frame">
        <div class="leftside">
            <div class="inside">left</div>
        </div>
        <div class="rightside">right</div>
    </div>
</body>
</html>