Make 6 divs look like grid but with 2 ways to scroll??

Make 6 divs look like grid but with 2 ways to scroll??

This is really more than a JQuery problem and any help would be greatly appreciated.
I've created a . JSFiddle of my problem.

I've got a grid cut up into 6 div tags.
Top1             |       Top2
Mid1             |       Mid2            <-scrolls vertically
Bottom1       |       Bottom2      <- scrolls horizontally

Mid2 and Bottom2 are set in css to scroll-y & scroll-x respectively. the rest are set to hidden.
When Mid2 scrolls (vertically) I need Mid1 to scroll with it but leave Top1, Top2, Bottom1 and Bottom2 frozen.
When Bottom2 scrolls (horizontally), I need Top2 and Mid2 to scroll with it but leave Top1, Mid1 and Bottom1 frozen.

I've tried various methods & have JQuery code in the example.
So far, I can't make it work.
HELP??

I need it to work in:
IE 11+
Edge
FireFox
Chrome
Opera
Safari