JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
    <div class="first">
    </div>
    <canvas class="cnvs">
    </canvas>
    <div class="second">
    </div>
</div>
</body>

CSS

body {
    display: flex;
    flex-direction: column;
}

.container {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    justify-content: space-around;
}

.first {
    background-color: red;
    flex-grow: 1;
}

.cnvs {
    flex-grow: 2;
}

.second {
    background-color: black;
    flex-grow: 1;
}

JavaScript

$(document).ready(function () {
    $(window).resize(function () {
        $(".cnvs").attr("width", $(".cnvs").width());
        $(".cnvs").attr("height", $(".cnvs").height());
    });
});