I'm creating a web page with some content which is divided into two sides: a left side and a right side. The right side contains various forms and needs to be scrollable, the left side instead contains only an image and some buttons/checkbox and it needs to stay fixed. Therefore the left side itself cannot be scrolled, but when I scroll the right side, the left side stay fixed and I still can see its content if I am at the top or at the bottom of the page.

In figures, what I am tring to achieve is something like the following:
[![enter image description here](https://i.stack.imgur.com/jylre.png)](https://i.stack.imgur.com/jylre.png)
In the figure above you can see my main page. The right content is scrollable and when you scroll it the left content stay fixed. At the bottom of the page I can still see the left content as in the following image:
[![enter image description here](https://i.stack.imgur.com/2owkY.png)](https://i.stack.imgur.com/2owkY.png)
Is there any way I can achieve this? I'm developing using Angular and Bootstrap, but I'm using also custom CSS.