Answers

Are you able to reproduce with that fiddle you sent? I've been trying, resizing up and down, and it's always working fine for me (Fedora/Chrome), even when the column widths are the same as yours. which browser are you using?

What's even more frustrating is that when you change the CSS in Edge's debugging tools (say to 10px bottom position for those elements - its 0.9em by default) they snap back into position. But then resize the browser and the jump out of position again.

I haven't been able to find some magic CSS combination to make it work in Edge. It appears it is simply calculating the bottom position incorrectly...!

The best workaround I could see was to position the icons relative to the top of the cell instead. Add this to your CSS:

As an FYI: this seems to work. It sets the height to a percentage (which seems to line everything up in ie/edge), and then puts a margin on the bottom that is as big as the height of the arrow element (0.75 rem) + the height of the bottom margin of the TH tag (0.75 rem).

It seems a bit hacky, but works in both edge and chrome (will test firefox, IE and opera later).