title: How to adjust the font size based on the content (which is a number and string) in a container?
body: <p>I am having a container which takes in the amount and the currency. As the amount gets bigger and reaches near to the right padding (i.e., 16px), the font size should be reducing. At the same time the top padding of the currency should also change. </p>
  
  <p><a href="https://jsfiddle.net/jmjjeena/uzsL7n0c/" rel="nofollow noreferrer">https://jsfiddle.net/jmjjeena/uzsL7n0c/</a></p>
  
  <pre><code>//////////////// REACT /////////////////
  
  class FontSize extends React.Component {
    constructor(props) {
      super(props)
      this.state = {}
    }
  
    render() {
      return (
          &lt;div className='container'&gt;
            &lt;div className='subContainer'&gt;
              &lt;div className='amount'&gt;$1000000000.00&lt;/div&gt;
            &lt;div className='currency'&gt;USD&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;FontSize /&gt;, document.querySelector("#app"))
  
  //////////////// CSS /////////////////
  
  body {
    background: white;
    padding: 20px;
    font-family: Helvetica;
  }
  
  #app {
    background: white;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
  }
  
  .container {
    background-color: white;
    box-sizing: border-box;
    border: 1px solid red;
    border-radius: 5px;
    width: 316px;
    height: 81px;
  }
  
  .subContainer {
    display: flex;
    flex-direction: row;
    padding: 16px 16px 12px 28px;
  }
  
  .amount {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    color: black;
    padding-right: 8px;
  }
  
  .currency {
     padding-top: 17px;
     font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    color: black;
  }
  
  </code></pre>