JSFiddle - React, Tailwind, and code Playground

HTML

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


<DIV class=stepContainer>
<DIV class=content id=step-1 style="HEIGHT: 491px; POSITION: ; ZOOM: 1; DISPLAY: block" jQuery19108982524329956913="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><BR>
<P>Please select your registration type from the selections below:</P>
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both">
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both">
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both">
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both">
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both">
<P style="MARGIN: 20px 6px 0px"><STRONG>Group Discount:</STRONG> Discounts are available for groups of 5 or more from the same company/firm. Please contact Blah in the Education Department to register.</P><BR style="CLEAR: both"></DIV></DIV>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
  margin:0;
  color:#717171;
  font: 12px  "Trebuchet MS", Arial, Helvetica, sans-serif;
  background:#cacaca url(/images/bg-body.gif) repeat-x 50% 0;
}
h1, h2, h3, h4 {
  font-weight: normal;
}
h1 {
  font-family: Palatino, "Times New Roman", Times, serif;
  font-size: 3em;
  color: #333;
  line-height: 1.2em;
  margin: .4em 0;
}
.newsHeadline  {
  font-family: Palatino, "Times New Roman", Times, serif;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: #333;
  line-height: 1.2em;
  margin: 1em 0 1em 0;
}
h2 {
  font-family: Palatino, "Times New Roman", Times, serif;
  font-size: 2em;
  color: #333;
  line-height: 1em;
  margin: .4em 0;
}
h3 {
  margin: 20px 0 -6px 0;
  font-size: 1.4em;
}
h4 {
  font-size: 1.2em;
  margin: 0px;
}
ul {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
img {
  border-style:none;
}
a {
  color:#484282;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
input, textarea, select {
 ...

JavaScript

$(window).load(function() {
    var $div = $("#step-1");
    var height = $div.height();
    var heightWithPadding = $div.innerHeight();
    var heightWithPaddingAndBorder = $div.outerHeight();
    var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);
  
       var height2 = 0;
        $div.children().each(function() {
            if($(this).is(':visible')) {
                 height2 += $(this).outerHeight(true);
            }
        });
    
    var $result = $("#result");
    $result.append("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);
    $result.append("<br />outerHeight: " + height2);
    });