Multiple panels side by side in same container - panel1 resize increases, panel2 resize decreases simultaneously

[amandakoster]

I think I need help.

Overview of the problem

I'm using react-rnd version 10.1.10

My browser is:
Chrome 84.0.4147.89

I am sure this issue is not a duplicate? yes

Reproduced project

https://codesandbox.io/s/wild-pond-ok4se?file=/src/index.js

With state: https://codesandbox.io/s/flamboyant-sanderson-omueh?file=/src/index.js

Description

Is it possible to have multiple panels side by side in same container - panel1 resize increases, panel2 resize decreases simultaneously. Or When a panel is resized, it will begin to push or pull at its neighbors recursively.

Steps to Reproduce

1. First Step: build 2 panels side by side: panel1, panel2
2. Second Step: resize panel1 from right edge
3. panel1 either resize above or below panel 2, panel 2 does not resize

Expected behavior

Resizing panel1 resize increases from right edge, making panel2 resize reduces from left edge simultaneously. Or, When a panel is resized, it will begin to push or pull at its neighbors recursively.

Actual behavior

panel1 either resize above or below panel 2 based on z-index, panel 2 does not resize

[rohitkrishna094]

I had the same question too. Was about to open an issue. Were you able to get this to work? If not, did you use a different react component altogether for your project?