Resize CSS Grid Layout

So I am attaching a sandbox to help with this question.
https://codesandbox.io/s/xenodochial-benz-2333fv?file=/src/ResizeColumns.tsx:185-196

I have 2 control Divs.
one for Rows,
one for Columns, and
a Central grid area.

I would like for the black bars in the control divs on the side and bottom to allow for adjusting the CSS grid.

  • Not sure how to allow for the black bars to move.
  • Grid layout on control divs should update with bar movement.
  • Central grid layout needs to update with bar movement.

Any help would be greatly appreciated even if its just more learning/research material.