Problem description

You have a two-column layout with a sidebar and main content. When the user scrolls down, the sidebar should stick to the viewport 20px from the top once it reaches that position.

Goal

Ensure that the sidebar element remains visible and fixed 20px from the top of the viewport after scrolling past its initial position.

Constraints

• Use CSS only (no JavaScript is allowed).

• The sidebar should not exceed the height of the viewport.

• The offset from the top must be exactly 20px.

• The layout should remain responsive on various screen widths.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.