JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkoutTabs_box">
        <ul id="checkoutTabs">
            <li>
                <div class="co_item_box">
                    <input type="radio" name="co_tab_group" id="co_001_tab" checked="checked" />
                    <label for="co_001_tab">Sign in</label>
                    <div class="eventCatcher">&nbsp;</div>
                    <div class="co_innerBlock">

                        <div class="table" style="width: 98%; margin: 0px auto;">
                            <div class="tr">
                                <div class="td">
                                    <div class="ColumnContainer">
                                        <spacer type="vertical" value="15"></spacer>
                                        <h2>New Customer</h2>
                                        <spacer type="vertical" value="5"></spacer>
                                        <p>Register with us for future convenience</p>
                                        <input type="button" value="CHECKOUT AS GUEST" name="guest" />
                                        <input type="button" value="REGISTER" name="register" />
                                    </div>
                                </div>
                                <div class="td">
                                    <div class="ColumnContainer">
                                        <spacer type="vertical" value="15"></spacer>
                                        <h2>Returning Customers</h2>
                                        <spacer type="vertical" value="5"></spacer>
                                        <p>Sign in to speed up your checkout process</p>
                                        <spacer type="vertical" value="10"></spacer>
                                        <label>Email Address</label>
                                        <spacer type="vertical" value="5"></spacer>
                                        <input type="text" value="" class="whole" />
    ...

CSS

html, body {
	height: 100%;
}
body {
	margin: 0px 0px 0px 0px;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	min-height: 100%;
}
form {
	display: block;
	flex: 1;
	height: 100%;
}
[id="mainFrame"] {
	width: 100%;
	margin: 0px auto;
	padding-top: 35px;
	position: relative;
	min-height: 100%;
	display: inline-block !important;	
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	-o-box-sizing:      border-box;
	-ms-box-sizing:     border-box;
	-khtml-box-sizing:  border-box;
	box-sizing:         border-box;
}
[id="TopStickyBar"] {
	width: 100%;
	height: 35px;
	background-color: #a7a7a7;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10000;
	display: inline-block;
	margin: 0px auto;
}
[id="TopStickyBar"] .container {
	max-width: 1280px;
	margin: 0px auto;
}
[id="TopStickyBar"] ul.tsbOptions {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}
[id="TopStickyBar"] ul.tsbOptions[class*="left"] {
	float: left;
	margin-left: 10px;
}
[id="TopStickyBar"] ul.tsbOptions[class*="right"] {
	float: right;
	margin-right: 10px;
}
[id="TopStickyBar"] ul.tsbOptions[class*="show"] {
	display: inline-block;
}
[id="TopStickyBar"] ul.tsbOptions[class*="hide"] {
	display: none;
}
[id="TopStickyBar"] ul.tsbOptions li {
	display: inline-block;
	margin: 0px 2px;
}
[id="TopStickyBar"] ul.tsbOptions li > span {
	display: inline-block;
	color: #EEE;
	font: normal 12px/35px Arial;
	margin: 0px 10px 0px 0px;
}
[id="TopStickyBar"] ul.tsbOptions li a {
	color: white;
	font: normal 12px/30px Arial;
	display: inline-block;
	padding: 0px 10px;
	margin: 0px -2px;
	border-bottom: #FFF solid 3px;
	background-color: transparent;	
	margin-top: 5px;
	text-decoration: none;	
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius:    6px 6px 0px 0px;
	-o-border-radius:      6px 6px 0px 0px;
	-ms-border-radius:     6px 6px 0px 0px;
	-khtml-border-radius:  6px 6px 0px 0px;
	border-radius:         6px 6px 0px 0px;	
	-webkit-transition:...

JavaScript

$(function () {

            var targetFrame = $('[class="checkoutTabs_box"]')
            var topMargin = 50;
            var bottomMargin = 25;

            $('label[for*="co_"][for*="_tab"]').click(function () {
                var sourceHeight = $(this).siblings('[class="co_innerBlock"]').height() + topMargin + bottomMargin;
                targetFrame.height(sourceHeight);
            })
        });