[Pin One Element to Scroll Until Bottom of Second Element]

What I'm trying to accomplish feels like it should be so easy, but I just can't for the life of me seem to nail it down. 

 

I have two images, side-by-side. One image is taller and portrait, the other is smaller and landscape. They both exist in a container of which the height is set to the larger image. I want to pin the smaller image on the right so when I scroll, it scrolls the length of the second image and then they both line up at the bottom.

 

Here's how I have my ScrollTrigger object set up:
 

let brandImageBlock = document.getElementById("brand-two-images");
let brandImagePin = document.querySelector("#brand-image-pin");

ScrollTrigger.create({
  trigger: brandImagePin,
  start: "top 20%",
  end: "bottom " + brandImageBlock.offsetHeight,
  pin: brandImagePin,
});

 

Maybe I'm just thinking about the end point all wrong, but the pinned image only seems to scroll for a few pixels before stopping. 

 

See the Pen KKveZeb by ColinTravis (@ColinTravis) on CodePen