sticky sidebar in a post not working (tailwind)

Question

I'm looking to make something similar to this As you can see, when you scroll the sidebar follows you.

This is my code, i can't make it work:

<template>
    <div class="blog-post">
        <div class="wrapper">
            <aside class="sidebar">
                <div class="sidebar-wrapper">
                    <!--- Content -->
                </div>
            </aside>

            <main class="main-post">
                <!--- Content -->
            </main>
        </div>
    </div>
</template>


<style lang="postcss" scoped>
.blog-post {
    @apply container;
    .wrapper {
        @apply flex gap-x-10 mt-10;
        .sidebar {
            @apply relative h-screen w-3/12 col-span-3 justify-center;
            &-wrapper {
                @apply h-full space-y-4;
            }
        }

        .main-post {
            @apply w-9/12 space-y-4;
        }
    }
}
</style>

How it looks:

The pink div, it's supposed to go all the way down when scrolling, but it doesn't happen.

Answer 1

The aside should be sticky

see the example here : https://play.tailwindcss.com/3AtWWNzmuF