JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body"> 
    
    <div class="variation1 font700 green1"> <h2> sample <span class="divider"> arrowshape </span> </h2> </div>
    <div class="clear"></div>
    
    <div class="variation2 font700 green2"> <h2> as the  text increases the font size must decrease but the block height must remain same <span class="divider"> as the  text increases the font size must decrease but the block height must remain same </span> </h2><div class="green2-after"></div> </div> 
    <div class="clear"></div>
    
</div>

CSS

body {
 font-size:1em;
 color:black;
 font-family:Arial;
 }

.font700{
font-size:auto;
}

.green1{
 background: linear-gradient(to right, #339933,#003300);
 }
 
 .green2{
 background: linear-gradient(to left, #339933,#003300);
 }
 .green2-after{
    display:inline-block;
    position:absolute;
     height: 0px;
    top: 0px;
    width: 0px;
    border-style: solid;
    border-width: 29px 0 29px 20px;
    border-color: transparent transparent transparent #339933;
 }
 
 .green1 :before{
      border-color: #ffffff #339933 #ffffff #ffffff ;
 }
 

.divider{
border-left: 0.05em solid black;
margin-left:-2%;
}
 
.clear {
        clear:both;
}
.variation1{
    width: 95.4%;
    position: relative;
	text-indent:1%;
	margin-left:5%;
	margin-top: 2%;
	text-align:left;
	margin-top:3%;
}

.variation2{
    width: 95.4%;
    position: relative;
	text-align:right;
	margin-left: -0.3%;
	margin-top: 4%;
}

.variation1 :before{
    content: " ";
    width: 0;
    position: absolute;
    left: -0.58em;
    border-style: solid;
    border-width: .585em .585em .585em 0;
}

/*.variation2 :after{
     content:" ";
     width: 0;
     position: absolute;
     right: -0.58em;
     border-style: solid;
     border-width: .585em 0 .585em .585em;
}
*/

JavaScript

$(".font700").each(function(i, obj) {
    newSize = $(obj).text().length;
    newSize = 64 - newSize;
    newSize = (newSize < 10) ? 10 : newSize;
    $(obj).css("font-size", newSize + "px");
});