syncscroll | scroll two or more areas | Canvas library

I have two tables which I'd like to synchronize in their column widths. I'm working in SAPUI5, and therefore I have an event that gets fired every time I resize the column of my table.

I'm currently using jQuery to get to my solution but it's not yet working the way I want it. I realize that there have been different questions to the same topic, I've gone through all of them but couldn't find the fitting solution.

Here's my code:

I have two mat tables side by side on a horizontal plane

the one on the left is there to materialize "pinned" columns, the one on the right is scrollable both vertically and horizontally.

I now want to sync up both table's scrolling, as in, the left one isn't going to have a scroll bar and the right one is

I want the right one's scroll to always be automatically applied to the left one.

this will male both look like a single table with columns pinned on the left.

I'm asking this here because I only found solutions that are very "jquery" such as : Synchronized scrolling using jQuery?

and thus far I've striving to be as "google standard" as it gets in my angular 6 project. my code is very ECMAScript and angular - oriented I've little to no jquery.

and I'm worried about performance and whatever code I use eventually not keeping up and eventually breaking the illusion.

is jquery really the best way to do this?

UPDATE 1 :

so far I've got (DOM) :

I'm using this accordion-style plugin to expand and collapse content under each row of a grid, like google images.

Everything works fine on my compter, but when you view this on an iOS device, the expanded content collapses when you scroll. You can see the problem in the link above if you check it on your iOS device. (The problem may exist in Android too, but I don't have access to that device.)

The scrolling problem is caused by this resize function: