JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
<div class="toolbar">
TOOLBAR
</div>
<div class="container flex-horizontal">
<div class="zone-left-column">
    <div class="canvas-wrapper">
        <canvas width="2000" height="1500"></canvas>
    </div>
</div>
<div class="zone-right-column">
RIGHT
</div>
</div>
</div>

CSS

* { padding: 0; margin: 0; }
*, *:before, *:after { box-sizing: border-box; }
html { height: 100%; }
body { padding: 0; margin: 0; height: 100%; width: 100%; }
.page { width: 70rem; margin: 0 auto; height: 100%; padding: 1rem; display: flex; flex-direction: column; background-color: yellow; }
.toolbar { width: 100%; background-color: rgba(200, 200, 200, 0.5); margin: 0 auto 1rem; display: flex; align-items: center; justify-content: space-around; flex: 0 0 5rem; }
.container { background-color: red; flex: 1; overflow: hidden; gap: 2rem; }
.flex-horizontal { display: flex; align-items: center; justify-content: center; }
.zone-left-column { background-color: green; display: flex; align-items: center; justify-content: center; }
.zone-right-column { background-color: orange; flex: 1; border: 1px solid black; }
.canvas-wrapper { }
canvas { border: 3px solid magenta; max-width: 100%; max-height: 100%; }