JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    Cool Text
</div>

CSS

.box{
    background-color: lavender;
    padding: 10% 0;
    text-align: center;
    /*font-size: 50px;*/
}

JavaScript

function foo(){
	var container = $(".box");
	var containerHeight = $(".box").innerHeight().toFixed();
	var neededSize = (containerHeight/100*40.32).toFixed();

	container.css("font-size", neededSize + "px");
}

$(window).resize(foo);
$(document).ready(foo);