dividing screen in 4 parts

I want to display 4 videos on the screen using react, if I increase the size of one video, the others should adjust accordingly , how can I do it?

I tried the following code

<SplitterLayout percentage secondaryInitialSize={50}>          {/* Left half */}<SplitterLayout vertical percentage secondaryInitialSize={50}><div className='bg-red-500 h-full' style={{ padding: '20px' }}>Top Left</div><div className='bg-green-400 h-full' style={{ padding: '20px' }}>Bottom Left</div></SplitterLayout>          {/* Right half */}<SplitterLayout vertical percentage secondaryInitialSize={50}><div className='bg-blue-500 h-full' style={{ padding: '20px' }}>Top Right</div><div className='bg-slate-500 h-full' style={{ padding: '20px' }}>Bottom Right</div></SplitterLayout></SplitterLayout>