Scrollable sticky div alongside container

I have been having issues keeping a sticky div that contains text which is rotated 90 deg inside an adjacent container. I am trying to accomplish what is in the image below.

The issue is that I've tried to align it correctly to stay within the container and scroll correctly but the sticky div which contains text, flows out of its container. See the image below.

/* This is the css*/    
.work-section {
    padding-bottom: 20px;
}

.work-title {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    top: 370px;
    transform: rotate(-90deg);
    width: fit-content;
    left: 80px;
    transform-origin: 0 0 0px;
}

.tt {
    position: relative;
    width: fit-content;
}

.test-img {
    width: 100%;
}

Here is the JSfiddle: https://jsfiddle.net/Ratsuns/mz08oew3/17/