I have the following challenge, please see picture.
Zones A and B are fixed headers.
Zone A has no need to scroll.
Zone B needs to scroll horizontally.
Zone C needs to scroll vertically.
Zone D needs to scroll horizontally as well as vertically.
When the user scrolls vertically in either zone C or D, both zones need to scroll vertically, in sync.
When the user scrolls horizontally in either zone B or D, both zones need to scroll horizontally, in sync.
I know how to do this with JS, but i'm interested if there's a pure CSS solution. I've explored position:sticky layouts, but i haven't managed to get it all the way there.
Thank you for your time!