JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <div class="frame">
    <div class="frame-content">
      <span> Блок после работы скрипта </span>
    </div>
    <div class="frame-content-2">
      <span> Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text </span>
    </div>
  </div>
</div>
<div class="right">
   <div class="frame">
    <div class="frame-content">
      <span> Блок до работы скрипта </span>
    </div>
    <div class="frame-content-2">
        <span> Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text  Content text   </span>
    </div>
  </div>
</div>

CSS

.left{
  width:220px;
  float:left;
}
.right{
  width:100%;
  padding-left:220px;
}
h1{
  width:220px;
}
.right textarea{
  width:100%;
  height:100px;
}
.frame{
  width:200px;
  height:300px;
  border:3px solid silver;
  font-family:Arial;
  box-sizing:border-box;
}
.frame span {
    display: table-cell;
    vertical-align: middle;
}
.frame-content{
  display:table;
   width:100%;
   height:30%;
   background-color:black;
   color:white;
    padding:0 4px;
    text-align:center;
     box-sizing:border-box;
}
.frame-content-2{
  display:table;
   width:100%;
   height:70%;
   background-color:white;
   padding:0 4px;
    box-sizing:border-box;
}

JavaScript

function text_scaling($block,text){
        var width_block = $block.width();
        var height_block = $block.height();
        text = text.replace(new RegExp('\r?\n','g'), '<br />');
        $block.find('span').html(text);
      
        if(text){
            var start_font = height_block*0.8;
            var font_size = font_size_determination($block,height_block,width_block,start_font);
            $block.css('font-size',font_size);
        }
     
    }
    function font_size_determination($block,height,width,font_size){
        $block.css('font-size',font_size);
        var block_height = $block.height();
        var block_width = $block.width();
        if (block_height > height || block_width > width){
            font_size = font_size*0.9;
            return font_size_determination($block,height,width,font_size);
        } else {
            return font_size;
        }
    }
    $('.left').find('.frame').each(function(){
    	  var $this = $(this);
        var $title = $this.find('.frame-content');
        var $content = $this.find('.frame-content-2');

        $title.css('font-size','1px');
        $content.css('font-size','1px');

        var text_title = $title.find('span').html();
        var text_content = $content.find('span').html();

        text_scaling($title,text_title);
        text_scaling($content,text_content);
    });