Как сделать так, чтобы текст внутри div придерживался влево?

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

В настоящее время это выглядит так:

Вот как в настоящее время настроена боковая панель:

export default class SideBar extends PureComponent {
    render() {
        return (
            <div className = "sidebar-container">
                <ul class = "sidebar-list">
                    <li role = "presentation" class = "active"><a href = "#">Home</a></li>
                    <li role = "presentation"><a href = "#">Profile</a></li>
                    <li role = "presentation"><a href = "#">Messages</a></li>
                </ul>
            </div>
        );
    }
}

с css

.sidebar-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    flex-shrink: 1;
    z-index: 999;
    // width: 20px;
}

.sidebar-container > ul {
    list-style: none;
}

.sidebar-list > li {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    // background-color: pink;
    color: white;
}

.sidebar-list > li > a {
    color: red;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 16px;
    background-color: green;
    font-size: 5vh;
}

Как мне воткнуть влево?