JSFiddle - React, Tailwind, and code Playground

by mpalmerlee

HTML

<table  width="100%" height="100" border="0"  cellpadding="5" cellspacing="0" style="border: 1px solid #97A5B0;font-size:12px;">
    <tr><td colspan='2' style="height:21px;line-height:10px;background-color:#f5f5f5;font-size:14px;" >Jquery css height test</td></tr>   
    <tr style="height: 25px;">
        <td width="20%">My Test Form</td>
        <td width="80%"><div id="mydiv" style="width: 100%;height:auto;"></div></td>
    </tr>
    <tr><td colspan="2" style="height: 100%; width: 100%;background-color:#f5f5f5"></td></tr>
    </table>

<div>Height before and after</div>
<div id="showHeightBefore"></div>
<div id="showHeightAfter"></div>
<div>New Form Element before and after:</div>
<div id="showNewElmHeightBefore"></div>
<div id="showNewElmHeightAfter"></div>

JavaScript

$(document).ready(function() {
    
        var myDiv = $('#mydiv');
        var newElm = $("<input type='text' id='myNewElement' style='border:1px solid #97A5B0;' />");
        
        
        newElm.css("height", myDiv.css("height"));
        newElm.css("width", myDiv.css("width"));
        
        
    
        $('#showHeightBefore').html(myDiv.css('height'));
        $('#showNewElmHeightBefore').html(newElm.css('height'));
        myDiv.replaceWith(newElm);
        //myDiv.css('height', myDiv.css('height'));
        $('#showHeightAfter').html(myDiv.css('height'));
        $('#showNewElmHeightAfter').html(newElm.css('height'));
    
    
});