How should I do this?

Question

Hi,
I want something like this on my website:
The site should be in half.
On the left are some pictures you can click on and on the right is a google maps map.

Also I want that you can scroll the left side so i can show more pictures after scrolling, but not the right side.

Should I do something like one container with two flexboxes beside each other
or
one flexbox which contains two flexboxes? The content (map and pictures) should have padding or something so that it has a little bit space from the main site. thats why my idea was to put them together in a container.
Or should I something different?

(Sorry for my bad english)

Answer 1

Here you go

https://code.sololearn.com/WE3xWmOH9ETT/?ref=app

Answer 2

You could simply use frames

Answer 3

You can use images what you want to put is on left and the map is on the right side by using float property and giving width to the left and right both giving 50%.