Rotated text not aligned

Question

I'm trying to align text after rotation :

I have a 2 lines text not aligned the same way as the others :

My css :

.link {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    bottom: 3%;
    left: 50%;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    text-align: left;
}

My HTML :

<div class="divider closed">
                <img class="main-logo hidden" src="http://digital-crystal.com/wp-content/uploads/2019/09/logo_ef_grand.svg" alt="main-logo">
                <div class="mask">
                    <h3 class="link"> Nous découvrir </h3>
                </div>
                <div class="content hidden">
                    .....
            </div>

Answer 1

<br> is creates the problem in your sample. If you remove <br>, the problem will fix.

Main reason is that; <br> creates margin and if you add border to your elements this will be more understandable.

To achieve this keeping <br>, you can add style='margin-bottom:8px;' your last element to overrite margin.

body {
            margin: 0;
        }

        .container {
            width: 100%;
            height: 100vh;
        }

        .container>div {
            float: right;
        }


        .closed {
            width: 5%;
            height: 100vh;
            -webkit-transition: width 2s ease;
            -moz-transition: width 2s ease;
            -o-transition: width 2s ease;
            transition: width 2s ease;
        }

        .open {
            width: 85%;
            height: 100vh;
            -webkit-transition: width 2s ease;
            -moz-transition: width 2s ease;
            -o-transition: width 2s ease;
            transition: width 2s ease;
        }

        .full {
            width: 90%;
            height: 100vh;
            -webkit-transition: width 2s ease;
            -moz-transition: width 2s ease;
            -o-transition: width 2s ease;
            transition: width 2s ease;
        }

        .hidden {
            display: none;
            -webkit-transition: width 2s ease;
            -moz-transition: width 2s ease;
            -o-transition: width 2s ease;
            transition: width 2s ease;
        }

        .visible {
            display: block;
            -webkit-transition: width 2s ease;
            -moz-transition: width 2s ease;
            -o-transition: width 2s ease;
            transition: width 2s ease;
        }

        .divider:nth-child(1) {
            background-image: url(./img.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0%;
            background-origin: initial;
        }

        .divider:nth-child(2) {
            background-image: url(./img2.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0%;
            background-origin: initial;
        }

        .divider:nth-child(3) {
            background-image: url(./img3.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0%;
            background-origin: initial;
        }

        .divider:nth-child(4) {
            background-image: url(./img4.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0%;
            background-origin: initial;
        }

        .mask {
            background: rgba(255, 255, 255, 0.4);
            position: absolute;
            width: 5%;
            height: 100vh;
            border:solid 1px #f1a;
        }

        .mask:hover {
            background: rgba(92, 25, 53, 0.4);
            transition-timing-function: steps(1, start);
        }

        .link {
            transform: rotate(-90deg);
            transform-origin: 0;
            -ms-transform: rotate(-90deg);
            -ms-transform-origin: 0;
            -webkit-transform: rotate(-90deg);
            -webkit-transform-origin: 0;
            -moz-transform: rotate(-90deg);
            -moz-transform-origin: 0;
            -o-transform: rotate(-90deg);
            -o-transform-origin: 0;
            position: absolute;
            bottom: 0;
            left: 50%;
            white-space: nowrap;
            border:solid 1px #333;
        }

<div class="container">

        <div class="divider closed">
            <div class="mask">
                <h3 class="link"> Nous découvrir </h3>
            </div>
            <div class="content hidden">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam ipsam ut nemo excepturi optio magnam
                voluptate tempore non fuga porro quia minus fugit maiores sit inventore, est labore, accusamus quae.
            </div>
        </div>

        <div class="divider closed">
            <div class="mask">
                <h3 class="link"> Entrepreneurs </h3>
            </div>
            <div class="content hidden">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam ipsam ut nemo excepturi optio magnam
                voluptate tempore non fuga porro quia minus fugit maiores sit inventore, est labore, accusamus quae.
            </div>
        </div>

        <div class="divider closed">
            <div class="mask">
                <h3 class="link" style='margin-bottom:8px;'> Professionnels <br> du droit et du chiffre </h3>
            </div>
            <div class="content hidden">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam ipsam ut nemo excepturi optio magnam
                voluptate tempore non fuga porro quia minus fugit maiores sit inventore, est labore, accusamus quae.
            </div>
        </div>
        

        <div class="divider open">
            <div class="content ">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam ipsam ut nemo excepturi optio magnam
                voluptate tempore non fuga porro quia minus fugit maiores sit inventore, est labore, accusamus quae.
            </div>
        </div>

    </div>