JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dropthebit.com/demos/stickyfloat/stickyfloat.js"></script>
<div id="space"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td id="left"> 
        Enter the height of the floating box:
        <INPUT TYPE="text" ID="height" NAME="height" /> 
        

        <div id="menu" style="display: none"></div>        
        <div id="button">EXPAND/COLLAPSE MENU</div>

    </td>
    <td id="right">
        <div id="float"></div>
    </td>
  </tr>
</table>

<div id="space"></div>
<div id="space"></div>
<div id="space"></div>

CSS

#space {
    height: 200px;
    background-color: blue;
}

#left {
    height: 500px;
    width: 50%;
    background-color: green;
      
}

#right {
    width: 50%;
    background-color: red;   
    position: relative;    
}

#float {
    position: absolute; 
    background-color: white; 
    width: 50px;
    height: 100px;   
}

#button {
    text-align: center;
    margin-top: 50px;
}

#menu {
    height: 500px;
    background-color: yellow;
}

JavaScript

//UPDATE HEIGHT
$("#height").change( function() {
    
    //FLOATING BOX
    var newHeight = $("#height").val();
    $("#float").height( newHeight );
    
   //RIGHT COLUMN (evil method) 
   $("#right").height( newHeight );
    
});


//EXPAND MENU
$("#button").on( 'click', function() {
    $("#menu").slideToggle();
});

    
//CALL STICKY FLOAT
$('#float').stickyfloat({duration: 400, lockBottom: true});