JSFiddle - React, Tailwind, and code Playground

CSS

.main {
  position: relative;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: red;
}

.content {
  order: 0;
  display: flex;
  background: yellow;
  flex: 1 1 auto;
}

.canvas {
  padding: 4px;
  margin: auto;
  min-width: 100px;
  flex: 1 1 auto;
  height: 40px;
  background: blue;
  box-sizing: border-box;
}

.label{
  flex: 0 1 auto;
}

JavaScript

var ready = require('enyo/ready'),
  kind = require('enyo/kind'),
  Toolbar = require('onyx/Toolbar'),
  Application = require('enyo/Application'),
  Button = require('enyo/Button');


ready(function() {
  var MySample = kind({
    name: "MySample",
    rendered: function() {
      this.inherited(arguments);
      c = this.$.myCanvas.hasNode();
      b = this.$.myCanvas.getBounds()
      //c.width = b.width;
      //c.height = b.height;
      console.log(c.width);
    },
    buttonTapped: function(inSender, inEvent) {
      this.render();
      return true;
    },

    components: [{
      classes: "main",
      components: [{
        classes: "content",
        components: [{
          classes: "canvas",
          tag: "canvas",
          name: "myCanvas"
        }, {
          classes: "label",
          content: "This text should be on 1 line, but wrap when canvas == min-width"
        }]
      }, {
        kind: Button,
        ontap: "buttonTapped",
        content: "Render",
      }]
    }],

  });

  app = new Application({
    view: MySample
  });
});