JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>    
</div>

CSS

html,body {
    width: 100%;
    height: 100%;
}
div#foo {
    background: red;
    width: 20%;
}

JavaScript

(function( $ ) {
  $.fn.keepRatio = function(which) {
      var $this = $(this);
      var w = $this.width();
      var h = $this.height();
      var ratio = w/h;
      $(window).resize(function() {
          switch(which) {
              case 'width':
                  var nh = $this.width() / ratio;
                  $this.css('height', nh + 'px');
                  break;
              case 'height':
                  var nw = $this.height() * ratio;
                  $this.css('width', nw + 'px');
                  break;
          }
      });
  
  }
})( jQuery );      
    
$(document).ready(function(){
    $('#foo').keepRatio('width');
});