How to position 270 degrees rotated text to the center bottom of parent div?

Question

I am trying to figure out how to align my rotated text to the center bottom of its parent div but for some reason it does not align to the bottom, it goes just a bit past it. Other questions show how to center it vertically, as you can see in the image this works fine but it goes out of it's parent at the bottom while bottom is set to 0.

Example:

This is my html:

<div class="sidebar">
        <a href="#"><span>Prinsengracht 673-4</span> <i class="icon-arrow-right"></i></a>
    </div>

SCSS:

.sidebar{
    position: absolute;
    z-index: 200;
    background: linear-gradient(180deg, #fff 55%, #EDEDED 45%);
    a{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%)rotate(270deg);
        display: inline-flex;
        align-items: center;
        width: 260px;
        color: $secondary;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        transition: none;
    }
}