diff --git a/djangoproject/scss/_custom-sidebar.scss b/djangoproject/scss/_custom-sidebar.scss
new file mode 100644
index 0000000000..9ea03b7119
--- /dev/null
+++ b/djangoproject/scss/_custom-sidebar.scss
@@ -0,0 +1,33 @@
+.sidebar-right {
+    display: flex;
+    gap: 40px;
+
+
+    .side-content {
+        position: sticky;
+        top: 20px;
+        align-self: flex-start;
+        padding: 10px;
+        width: calc(100% - 70%);
+    }
+
+    [role="complementary"] {
+        width: 100% !important;
+    }
+
+    @media screen and (max-width: 768px) {
+        .side-content {
+            width: 100% !important;
+            position: unset !important;
+            top: 0 !important;
+            align-self: unset !important;
+            padding: unset !important;
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .sidebar-right {
+        flex-direction: column !important;
+    }
+}
diff --git a/djangoproject/templates/base.html b/djangoproject/templates/base.html
index 29ee65b877..d0c7b44eb9 100644
--- a/djangoproject/templates/base.html
+++ b/djangoproject/templates/base.html
@@ -95,7 +95,9 @@
         <a href="#top" class="backtotop"><i class="icon icon-chevron-up"></i> Back to Top</a>
       </div>
 
-      {% block content-related %}{% endblock %}
+      <div class="side-content">
+        {% block content-related %}{% endblock %}
+      </div>
       {% block content-extra %}{% endblock %}
 
     </div>