ReactJS component with multiple canvas elements

I am trying to recreate Web app from WinForm application using ReactJS and Typescript. Application should compare image from camera with some reference image and output absolute difference and marked difference images.

My idea was to have camera content component with 4 canvas elements. I would like those elements be autosize and don't overlap each other but I am not sure how to implement that?

In WinForm app I was using tablelayoutpanel and everything fit nicely, however I don't know what control would be equivalent in html and css (no web experiecne :( ).

This is what I want:

This is how is at the moment

This is code which I have currently under CameraContent component

   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 for that

.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%;
}

Any help would be appreciated. Thanks!