This is a three-column page layout, with click-drag dividers for resizing the widths of each column.
By default the columns use a grid-template-columns rule
that sets the column widths to 100% / 3, but with offset
values that link the widths of adjacent columns. Offsets are zero by
default, but by moving dividers we can change those offsets, in which
case they make one column less wide, while making the other column
wider.
The way this works is actually "with as little javascript as possible": the column widths are calculated purely in CSS, based on CSS variables for the offset values, so all the JS does is check "is it appropriate for me to update those values?" and if it is, update them.
The code does not actually compute any "widths": all it does is track how much we moved a divider away from it's starting point, and that value is enough for CSS to do the rest without requiring any further "programming" code.
Instead, the bulk of the code is simply CSS, with the "magic"
happening in our layout.css file, which is responsible
for setting up all our positional variables and specifying the
constraints for columns and dividers using
calc() instructions.
Which means that although our grid-resize.js file might
look a little long, it's actually less than 40 lines if you remove the
comments, and half of those are just prepping variables, and adding
checks and balances to make sure we don't do anything when we
shouldn't.
The moment we change one of our variables, that change will get applied through all the various calculations by the browser, and the page automatically (and near-instantly, much faster than JS can update things) applies all the layout changes to the page.