JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

<DIV class=content id=step-1 style="HEIGHT: 316px; POSITION: ; ZOOM: 1; DISPLAY: block" jQuery19101320840319795722="20"><H2 class=StepTitle>Select Your Registration Type</H2>
<H3 style="TEXT-ALIGN: center"><SPAN id=regRateAdLine>Save by registering online by 5pm on June 16!</SPAN></H3>
<P>Please select your registration type from the selections below:</P>
<SPAN class=radioRegType>
    <INPUT name=ctl00$ctl00$main$main$regType id=regType_Member onclick=toggleLoginPanel(); type=radio value=regType_Member>
</SPAN>
    <LABEL id=regType_Member_RadioButton_Label for=regType_Member><STRONG>Member</STRONG>&nbsp;&nbsp;-&nbsp;&nbsp;<EM>Must select to receive credit</EM></LABEL><BR>
<DIV id=loginPanel style="PADDING-LEFT: 25px; DISPLAY: none">
<P>Please provide the following information to register as a member.</P><SPAN class=formLabel id=Login_LastName_Label>Your last name</SPAN> <INPUT name=ctl00$ctl00$main$main$Login_LastName id=Login_LastName style="WIDTH: 200px" type=text maxLength=31 index="7" AUTOCOMPLETE="OFF"><BR><SPAN class=validationMsg id=Login_LastName_RequiredFieldValidator style="DISPLAY: none" controltovalidate="Login_LastName" focusOnError="t" errormessage="Your last name is required<br /><br />" display="Dynamic" validationGroup="loginForm" initialvalue isvalid="true">Your last name is required<BR><BR></SPAN><SPAN class=formLabel id=Login_BarNumber_Label>Your bar number</SPAN> <INPUT name=ctl00$ctl00$main$main$Login_BarNumber id=Login_BarNumber style="WIDTH: 80px" type=text maxLength=6 index="8"> Please enter all six digits<BR><SPAN class=validationMsg id=Login_BarNumber_RequiredFieldValidator style="DISPLAY: none" controltovalidate="Login_BarNumber" focusOnError="t" errormessage="Your bar number is required<br /><br />" display="Dynamic" validationGroup="loginForm" initialvalue isvalid="true">Your bar number is required<BR><BR></SPAN><SPAN class=formLabel id=Login_BirthYear_Label>Year you were born</SPAN> <INPUT...

CSS

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

JavaScript

function toggleLoginPanel() {
	if ($("#regType_Member").is(":checked")) {
		$("#loginPanel").slideDown(function() { fixHeight(); });
					
	}
	else {
		$("#loginPanel").slideUp(function() { fixHeight(); });
	}

    var $div = $("#step-1");
    var height = $div.height();
    var heightWithPadding = $div.innerHeight();
    var heightWithPaddingAndBorder = $div.outerHeight();
    var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);
    
    var $result = $("#result");
    $result.append("<br /><br />Height: " + height);
    $result.append("<br />height with padding: " + heightWithPadding);
    $result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
    $result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);
}

function fixHeight(){
    alert("fixHeight");
        var height = 0;

        //var selStep = this.steps.eq(this.curStepIdx);
        var stepContainer = $("#step-1");
        stepContainer.children().each(function() {
            if($(this).is(':visible')) {
                 height += $(this).outerHeight(true);
            }
        });

        // These values (5 and 20) are experimentally chosen.
        //stepContainer.height(height);
        //this.elmStepContainer.height(height + 12);

        stepContainer.animate({ "height": height - 12 }, 500);
        this.elmStepContainer.animate({ "height": height }, 500);
        //stepContainer.animate({ "height": height + 43 }, 500);
        //this.elmStepContainer.animate({ "height": height + 31 }, 500);
        alert(stepContainer.outerHeight(true));

    }