I am trying to build a page that allows the user to add a 'tile' to a grid through drag and drop. I can find a ton of js libraries and CSS / HTML examples for this - but all of them rely on the grid row / column dynamically resizing when an additional 'tile' is dragged to a grid section. I'm trying to find a way that the tiles within any one 'cell' will dynamically resize to fit in the cell when tiles are added or removed.

I've tried to illustrate this - has anyone seen this done either through a js library or css/html (or anything else)? It will be part of a React web page.

In the example below - there is one grid row and two grid columns. When a new tile is dragged to column 2 tile B dynamically resizes to allow the tile to be added without needing the row size to increase (relative to screen size).

Thanks for any response.