How to make an a responsive table grid with alphabetical ordered columns

Hi @ef4 , thought I solved this problem with TailwindCSS, but turns out I wasn’t looking close enough and the terms were no longer alphabetized. So I rolled it back to flex/min-width and this is the result.

After wrestling with it through the long weekend, I concluded this comes from window.innerWidth (or $(window).width() in the Twiddle, along with the subsequent window.addEventListener and window.addEventListener.

Would you recommend using clientWidth instead, and, if so, how? Found another answer of yours on the subject, but don’t know if the same workflow applies here. Also found ember-in-viewport and it seems like it could provide a way to make this work.

Is there a good way to bind the table/grid to the width of an element instead of the window?