JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maFen" align="center";> 
    
   <input name="monBouton" id="monBouton" type="button" onClick="$();"value="Changer hauteur" />

    </div>
    
    
     <div id="maFen2" > 
    
  <input name="monBouton1" id="monBouton1" type="button" /> <br>  
  <input name="monBouton2" id="monBouton2" type="button" /><br>     
  <input name="monBouton3" id="monBouton3" type="button" />     

    </div>

CSS

#monBouton1 {
   position: relative; 
   float:left; 
   margin-left:0;
   margin-right:0; 
   padding-left:0;
   padding-right:0; 
   border:0px; 
   width:25%;
   height:350px;
   outline: none;
   background-color: black;
   color:#ffffff;
   font-weight:bold;
   font-size: 26px;
}

#monBouton2 {
   position: absolute; 
   left:0;
   top:160px;
   border:0px; 
   width:65%;
   height:10px;
   outline: none;
   background-color: red;
   color:#ffffff;
 }
 
 #monBouton3 {
   position: absolute; 
   left:0;
   top:100px;
   border:0px; 
   width:25%;
   height:310px;
   outline: none;
   background-color: green;
   color:#ffffff;
 }

JavaScript

$("#monBouton").click(function() {
    
    pos1 = $("#monBouton3").offset().top 
    pos2 = $("#monBouton3").height(); 
    pos3 = pos1+pos2;
    pos4 = $("#monBouton2").offset().top;    

   // });
    
   var FtS1 = parseInt($("#monBouton3").css('height'));
   //alert(FtS1);
    // on determine d'abord la taille de police qui convient
   var FtS = FtS1;
    
   if  (pos3 > pos4) {
    FtS=FtS-10;
    $("#monBouton3").css({
        'height': FtS + 'px',
       });
   pos2 = $("#monBouton3").height();
   }
   
   });