How do I specify origin of css active to deactive state?

I have the following script in my html page that selects two divs that take up the left and right side of the screen. When one is clicked I want it to expand to fill the screen while the other shrinks. This code works perfectly when I click the right side, but when I click the left, it shrinks the right side from right to left. How would I flip which way the right div shrinks?

<div class="left">
    <span>Register</span>
</div>
<div class="right">
    <span>Log In</span>
</div>

<script>
        let left = document.querySelector('.left');
        let right = document.querySelector('.right');
        console.log(right);
        left.onclick = function () {
            left.classList.toggle('active');
            right.classList.toggle('deactive');
        };

        right.onclick = function () {
            left.classList.toggle('deactive');
            right.classList.toggle('active');
        };

</script>

.left {
    top: 0vh;
    left: 0vw;
    position: absolute;
    background-color: rgb(33, 216, 88);
    height: 100vh;
    width: 50vw;
    transition: all 0.5s ease;
}

.right {
    top: 0vh;
    left: 50vw;
    position: absolute;
    background-color: rgb(56, 111, 230);
    height: 100vh;
    width: 50vw;
    left: 50%;
    transition: all 0.5s ease;
}

.left.active {
    width: 100vw;
}

.left.deactive {
    width: 0vw;
}

.right.active {
    top: 0;
    left: 0;
    width: 100vw;
}

.right.deactive {
    width: 0vw;
}