CSS – Make a Sidebar Box Sticky

I’m using TailwindCSS in my project. My page looks like below:

<main class="max-w-7xl mx-auto mt-6 px-4">
  <div class="flex flex-col md:space-x-12 justify-center md:flex-row">
    <div class="w-full md:w-9/12 mb-8">
      <h1 class="text-3xl font-bold mt-2 mb-4">Title</h1>
      <p class="mb-4 uppercase text-gray-500">META DATA</p>
      <div class="prose lg:prose-lg post">
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
        <p class="bg-gray-200 p-5 h-36 m-3"></p>
      </div>
      <hr class="mt-5" />
    </div>
    <div class="w-full md:w-3/12">
      <div class="mb-5 mx-auto" style="max-width:300px">
        <div class="rounded rounded-lg border">
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
          <p class="bg-blue-100 p-5 h-12 m-3"></p>
        </div>

        <div class="rounded rounded-lg border mt-10 sticky self-auto top-20">
          <div class="p-20">Make this box sticky</div>
        </div>
      </div>
    </div>
  </div>
</main>

I want to make the bottom box in the right sidebar sticky but it’s not happening. I’ve seen many threads and followed advice like make it flex-start, but it doesn’t work in this layout. Can you please help?

You can see the playground here – https://play.tailwindcss.com/MaFc2vXQRe

>Solution :

Add display: unset; on the parent div of sticky div check below code.

<div class="mb-5 mx-auto" style="max-width:300px; display: unset;">

Let me know if you have to face any issue