Equal height boxes + observe layout changes

Which way should I choose to observe layout changes on a website?

I use the jQuery EqualHeight plugin on two content boxes, with a border-right on the first box to divide them. If the height of the right box is taller, then the border doesn't fit, that's the reason why I use EqualHeight jQuery.

so far so good...

If the size of the right box changes, maybe because of an accordion or show/height effect, the height of the leftbox and so the border/divider stays the same.

So what is the simpliest way to observe layout changes, without recalling the equal height function on explicit actions (like show/hid开发者_StackOverflow中文版e toggles)?

Should I use a timer to check regulary on layout changes and execute the function or does this decrease performance?

As a side-note I could use a table or display:table to mimic the table behaviour, but this is a bit poor. I tried out Flexbox CSS rules and it's awesome(ly experimental/unsupported). So as simple fallback I like to set equal height via JS

The easiest way is to know when these layout changes take place. This is not at some random time, there is always a way to say: "Hey, now it is changed".

The easiest way is to use jQuery functions that change the layout and use an event structure. For example, send a custom event when a change happens. The other elements can now adjust to that.

The nice thing about jQuery is that almost every function has a callback. use the callback when some animation is done to send your custom event to other elements so they can adjust their height.