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>
    <div class="clear"></div>
    
</div>

CSS

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

.font700{
font-size:3em;
}

.green1{
 background: linear-gradient(to right, #339933,#003300);
 }
 
 .green2{
 background: linear-gradient(to left, #339933,#003300);
 }
 .green2 :after{
     border-color: #ffffff #ffffff #ffffff #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;
}