Sticky side bar 2:1 container

[Lewis_Parker]

Hey, id love to use a 2:1 container and for the right (1) sized portion it would be great to make it sticky. Similar to the below GIF

or link if gifs dont work here: Jaecoo 7 Review 2025 | Performance & Pricing | Carwow

Before i dive in has anyone had a look at a similar thing in the past or anything?

[ThinhDinh]

Here’s a concept.

.test-container .twoToOne >div:nth-child(2) {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  height: fit-content;
}

.test-container .twoToOne > div {
    border-radius: 0.75rem;
    background-color: var(--gv-bg-front);
    padding: 1.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-width: 1px;
    border-color: var(--gv-border-base);
}

I named my 2:1 container’s class “test-container”.

[MaximeBaker]

Why not just use the 2:1 container?

[Lewis_Parker]

I am, what i was asking for was the 1 portion to stick as the user scrolled down the page.

like the gif in my post

Thinh concept got me started and with some small adjustments im where i want to be

[MaximeBaker]

Okay , I wanted to make sure!