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></span>
    </div>
  </div>
</div>
<div class="right">
  <textarea id="title-text" placeholder="Title"></textarea>
  <textarea id="text" placeholder="Content"></textarea>
</div>

CSS

.left{
  width:220px;
  float:left;
}
.right{
  width:100%;
  padding-left:220px;
}
.right textarea{
  width:100%;
  height:100px;
}
.frame{
  width:200px;
  height:300px;
  border:3px solid silver;
  font-family:Arial;
}
.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;
}
.frame-content-2{
  display:table;
   width:100%;
   height:70%;
   background-color:white;
   padding:0 4px;
}

JavaScript

$('#text').keyup(function(){
        var text = $(this).val();
        var $block = $('.left').find('.frame').find('.frame-content-2');
        text_scaling($block,text);
    });
    $('#title-text').keyup(function(){
        var text = $(this).val();
        var $block = $('.left').find('.frame').find('.frame-content');
        text_scaling($block,text);
    });
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;
        }
    }