HTML$/$CSS$/$PHP$/$JS

I want to design a game map from scratch. The left side of the page depicts a map $($any static image of a map$)$ with pins $($clicking on the pins will reference cards on the right side of the map$).$ The right side of the map depicts cards that correspond to the left side of the map. There must be a minimum of five pins on the left and five cards on the right.

Clicking on the left side of the pins will take you to the corresponding card on the right, while clicking on the right side with the cards will take you to the corresponding pin on the left.

Attached is a rough idea of how I want my game map to look.

The requirements I need:

$-$Split functions of the page between left and right

$-$A map on the left side with pins

$-$Cards on the right side

$-$Five pins and five cards

$-$Clicking the pin on the left side will select the correct card on the right.

$-$Clicking the card on the right side will select the correct pin on the left