Компонент ReactJS с несколькими элементами холста

Я пытаюсь воссоздать веб-приложение из приложения WinForm с помощью ReactJS и Typescript. Приложение должно сравнить изображение с камеры с некоторым эталонным изображением и вывести изображения с абсолютной и отмеченной разницей.

Моя идея заключалась в том, чтобы иметь компонент содержимого камеры с 4 элементами холста. Я бы хотел, чтобы эти элементы автоматически изменяли размер и не перекрывали друг друга, но я не уверен, как это реализовать?

В приложении WinForm я использовал tablelayoutpanel, и все отлично подходило, однако я не знаю, какой элемент управления будет эквивалентен в html и css (нет веб-экспериментов :().

Вот чего я хочу:

Это как сейчас

Это код, который у меня сейчас есть в компоненте CameraContent.

   render() {

    return (
        <div>

            <div className='label-image-viewer'>                
                <div className = "cam1"><caption className = "caption"> Cam1 <canvas id = "upperLeftCam" /></caption></div>
                <div className = "cam2"><caption className = "caption"> Cam2 <canvas id = "upperRightCam"/></caption></div>
                <div className = "cam3"><caption className = "caption"> Cam3 <canvas id = "bottomLeftCam" /></caption></div>                    
                <div className = "cam4"><caption className = "caption"> Cam4 <canvas id = "bottomRightCam"/></caption></div>
            </div>
        </div>
    )
}

css для этого

.label-image-viewer {
    height:100%;   
    width: 100%;
}
.cam1{
    top:30%;
    left:20%;
    position: relative;
    display: inline-block;
    border: 2px solid blue;
}
.cam2{
    top:30%;
    left:50%;
    position: relative;
    display:inline-block;
    border: 2px solid red;
}
.cam3{  
    top: 30%;  
    left: 20%;
    position: relative;
    border: 2px solid green;
    width:18%;
}
.cam4{

    left:68%;
    position: relative;
    border: 2px solid gray;
    width:18%;
}

Любая помощь будет оценена. Спасибо!