JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;height:200px; vertical-align: top;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;height:200px; width:300px;">Div 2
    <div id="canvasDiv"  >
<canvas id="myCanvas"    style="border:1px solid #000000;"></canvas> 
</div>
    </div>
    <div style="border:1px solid red; display:inline-block;height:200px;vertical-align: top;">Div 3</div>
</div>
<br/>

CSS

#canvasDiv {
     width: 300px;
     height:200px;
     margin: 0px auto;
   }