JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-textfill.github.com/jquery-textfill/jquery.textfill.min.js"></script>
<div class="fixedwidth">
    <span>Fixed-width container</span>
</div>

<div class="variablewidth">
    <span>Variable-width container</span>
</div>

CSS

.fixedwidth{
  position: relative;
  float: left;
  background-color: lightgrey;
  text-align: center;
  width: 400px;
  height: 200px;
}


.variablewidth{
  position: relative;
  float: left;
  clear: both;
  margin-top: 20px;
  background-color: yellow;
  text-align: center;

  width: 40%;
  padding-bottom: 23%;
  height: 0;
}

JavaScript

$(function(){
    $('.fixedwidth').textfill({ maxFontPixels: 250 });
});

$(function(){
    $('.variablewidth').textfill({ maxFontPixels: 250 });
});