JSFiddle - React, Tailwind, and code Playground

HTML

<!-- INVALID -->
<div id="box">
  <span>
    <span id="innerspan">
      Some long piece of text right here yes
    </span>
  </span>
</div>

CSS

#box {
  position: absolute;
    left: 17px;
    top: 85px;
    width: 130px;
    /* padding-left: 1px; */
    /* padding-right: 1px; */
    height: 69px;
    transform: translateX(0px) translateY(0px) rotate(
0deg
) scale(1);
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

#innerspan {
  font-weight: normal;
  font-style: normal;
  color: black;
  -webkit-text-stroke: 0px rgba(0, 0, 0, 0);
  text-transform: none;
  text-decoration: none rgb(0, 55, 129);
  line-height: 0.904;
  margin-top: 0.048em;
  letter-spacing: 0em;
}

JavaScript

(function(root, factory) {
  "use strict";

  // UMD shim
  if (typeof define === "function" && define.amd) {
    // AMD
    define([], factory);
  } else if (typeof exports === "object") {
    // Node/CommonJS
    module.exports = factory();
  } else {
    // Browser
    root.textFit = factory();
  }

}(typeof global === "object" ? global : this, function () {
  "use strict";

  var defaultSettings = {
    alignVert: false, // if true, textFit will align vertically using css tables
    alignHoriz: false, // if true, textFit will set text-align: center
    multiLine: false, // if true, textFit will not set white-space: no-wrap
    detectMultiLine: true, // disable to turn off automatic multi-line sensing
    minFontSize: 6,
    maxFontSize: 80,
    reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
    widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
    alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
  };

  return function textFit(els, options) {

    if (!options) options = {};

    // Extend options.
    var settings = {};
    for(var key in defaultSettings){
      if(options.hasOwnProperty(key)){
        settings[key] = options[key];
      } else {
        settings[key] = defaultSettings[key];
      }
    }

    // Convert jQuery objects into arrays
    if (typeof els.toArray === "function") {
      els = els.toArray();
    }

    // Support passing a single el
    var elType = Object.prototype.toString.call(els);
    if (elType !== '[object Array]' && elType !== '[object NodeList]' &&
            elType !== '[object HTMLCollection]'){
      els = [els];
    }

    // Process each el we've passed.
    for(var i = 0; i < els.length; i++){
      processItem(els[i], settings);
    }
  };

  /**
   * The meat. Given an el, make the text inside it fit its parent.
   * @param  {DOMElement} el       Child el.
   * @param...