Owl carousel – leftmost item width needs to grow to the right, without overlapping or being hidden

I’m building an owl carousel but I’m running into an issue. I’ve forked a Codepen that has almost exactly what I’m looking for and made my own modifications to it, but it’s not quite right.

The leftmost item in the carousel should expand its width, so that you can see the full expanded card and not overlap any other cards.

My code:
https://codepen.io/miltil/pen/yyyBbqg

So far, it almost works right…I can move the carousel, and the item on the far left does expand to the width I specify. However, it expands towards the left, so that half of the card is hidden once it’s expanded. I need it to expand to the right instead, shifting over all of the other cards to the right.

I feel like I’m close, because when I comment out the line in the javascript that removes the “active” class:
$(".custom-carousel .item").removeClass("active");
it does expand to the right and move the other cards over, like I want to happen! The only issue is that then, since the active class is not removed from the other cards, all the cards eventually get expanded to the larger size as you scroll through the carousel.

I really appreciate any help, thank you!