JSFiddle - React, Tailwind, and code Playground

HTML

<body onresize="resized()">

  <div class="main">
    <canvas id="canvas" class="can"></canvas>
    <div id="label" class="lab">
      This is a bit of text. It should be 1 line, but wrap as necessary.
    </div>
  </div>
</body>

CSS

.main {
  display: flex;
  margin: 0px;
  position: relative;
  padding: 0px;
  margin: auto;
  flex: 1 1 auto;
}

.lab {
  background: red;
  margin: auto;
  text-align: left;
  padding: 4px;
}

.can {
  margin: auto;
  height: 40px;
  //width: 100%;
  flex: 1 1 auto;
  min-width: 100px;
  padding: 4px;
  background: orange;
}

JavaScript

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');
label = document.getElementById('label');
//draw()

function resized() {
  label.innerHTML = "This is a bit of text. It should be 1 line, but wrap as necessary.: " + canvas.width;
  draw();

}

function draw() {

  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = "black"
  ctx.strokeRect(0, 0, canvas.width, canvas.height);

}

window.addEventListener('resize', resized);