JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primaryScene" class="scene">
    <div class="hbox" id="hbox0">
        <div class="viewWrapper" id="view0">
            <canvas class="canvasView">view0 canvas</canvas>
            <aside class="sideContent">view0 aside</aside>
        </div>
        <div class="viewWrapper" id="view1">
            <canvas class="canvasView">view1 canvas</canvas>
            <aside class="sideContent">view1 aside</aside>
        </div>
    </div>
    <div class="hbox" id="hbox1">
        <div class="viewWrapper" id="view2">
            <canvas class="canvasView">view2 canvas</canvas>
            <aside class="sideContent">view2 aside</aside>
        </div>
        <div class="viewWrapper" id="view3">
            <canvas class="canvasView">view3 canvas</canvas>
            <aside class="sideContent">view3 aside</aside>
        </div>
    </div>
</div>

CSS

.scene {
    display: flex;
}

.hbox {
    flex: 1;
}
.viewWrapper {
    display: flex;
    margin: 0 2px 2px 0;
}

.canvasView {
    flex: 1 1 60%;
}

.sideContent{
    flex: 0 1 40%;
}

canvas{
  border:1px solid black;
}

aside {
  border: 1px solid blue;
}