Update height of div when height changes

by Akram kamal

HTML

<div class="container">
	<form action="">
		<div class="row">
			<div class="col-xs-12">
				<div class="col-100">
					<div class="form-group">
						<div class="col-100 busblind">
							<div class="input-container">

								<div class="top-size">
									<p><span id="SignWidth"></span>cm Approx</p>
									<input type="hidden" id="SignWidthValue" name="SignWidthValue" value="">
								</div><!-- top size -->

								<input id="LrgInput" type="text" maxlength="27" name="BusBlindInputLrg" class="form-control BusBlindInputLrg" value="Shobnall Road">
                                    <div class="clear"></div>
								<input id="SmlInput" type="text" maxlength="27" name="BusBlindInputSml" class="form-control BusBlindInputSml NoSubTxt" value="Extra Text">

								<div class="left-size">
									<p><span id="SignHeight"></span>cm Approx</p>
								</div><!-- top size -->

							</div><!-- input container -->
						</div><!-- busblind -->
					</div><!-- form group -->
				</div><!-- col-100 -->
			</div><!-- col-xs-12 -->
		</div><!-- row -->

		<div class="row">
			<div id="SubText" class="col-sm-6 col-xs-12">
				<h3>Add Additional Sub Text</h3>
				<div class="form-group BuilderButtons">
					<div class="radio">
						<label>
							<input type="radio" name="AddSubText" value="YesSubTxt" class="formShowHide_ctrl" data-show-id="SubColour">
							<span class="BtnBlock sub-text"><i class="fa fa-text-width"></i></span>
							<span class="fa fa-check"></span>
							Yes
						</label>
					</div><!-- radio-->
				</div><!-- form group -->

				<div class="form-group BuilderButtons">
					<div class="radio">
						<label class="active">
							<input type="radio" name="AddSubText" value="NoSubTxt" checked>
							<span class="BtnBlock sub-text"><i class="fa fa-text-width"></i></span>
							<span class="fa fa-check"></span>
							No
						</label>
					</div><!-- radio-->
				</div><!-- form group -->
			</div><!-- col-sm-6 -->
		</div><!-- row...

CSS

.design-stage1 h1 {
	text-align:center;
	font-size:22px;
}
.design-stage1 p {
	text-align: center;
	color: #a0a0a0;
	font-size: 14px;
}
.busblind {
	text-align: center;
	margin-top: 60px;
	margin-bottom: 30px;
}
.BusBlindInputLrg,
.BusBlindInputSml {
	background: #000;
	border-radius: 0px;
	border:none;
	height:auto;
	color:#fff;
	text-transform:uppercase;
	float:none;
	margin:auto;
	overflow:hidden;
}
.BusBlindInputLrg {
	font-size:48px;
	text-align:center;
	/*height: 72px;*/
	line-height:0;
	padding: 15px;
	font-family: 'london_tubenormal';
}
.BusBlindInputSml {
	font-size:25px;
	text-align:right;
	float: right;
	/*padding:15px;*/
	padding-top: 0;
}
.BusBlindInputLrg:focus,
.BusBlindInputSml:focus {
	box-shadow:none;
	-webkit-box-shadow:none;
	border:none;
}
.input-container {
	display:inline-block;
	background: #000;
	margin:auto;
	position: relative;
}
.top-size,
.left-size {
	position: absolute;
	width: 200px;
}
.top-size {
	left: 50%;
	top: -40px;
	height: 20px;
	margin-left: -100px;
	background: url(../images/top-arrows.png) no-repeat center center;
}
.left-size {
	top: 50%;
	margin-top: -62px;
	width: 120px;
	height: 125px;
	background: url(../images/side-arrows.png) no-repeat center center;
	left:-120px;
	line-height:125px;
}
.clear {
    clear:both;
}
.top-size p,
.left-size p {
	margin: 0;
	color: #000;
	font-size:11px;
	text-align: center;
}
#SmlInput.NoSubTxt {
	display: none;
}
#SmlInput.YesSubTxt {
	display: block;
}
#LrgInput.YesSubTxt {
	padding-bottom: 0;
}

JavaScript

$(document).ready(function(){
        $('#SubText input:radio').click(function () {
            var others = $("[name='" + this.name + "']").map(function () {
                return this.value
            }).get().join(" ")
            console.log(others)
            $('#SmlInput, #LrgInput').removeClass(others).addClass(this.value)
        });
/*--------------------------------------------------------------------------
Map Cm Values
---------------------------------------------------------------------------*/
        $(function(){
            var height = $(".input-container").height()
            $("#SignHeight").text(height);
            if (height <= 72) {
                $("#SignHeight").text('20');
            }
            else {
                $("#SignHeight").text('25');
            }
        });
        function GetWidth(){
            var width = $(".input-container").width();
            $("#SignWidth").text(width);
            if (width <= 78) {
                $("#SignWidth").text('30');
                $("#SignWidthValue").val('30');
            }
            else if (width <= 110) {
                $("#SignWidth").text('35');
                $("#SignWidthValue").val('35');
            }
            else if (width <= 142) {
                $("#SignWidth").text('40');
                $("#SignWidthValue").val('40');
            }
            else if (width <= 174) {
                $("#SignWidth").text('45');
                $("#SignWidthValue").val('45');
            }
            else if (width <= 206) {
                $("#SignWidth").text('50');
                $("#SignWidthValue").val('50');
            }
            else if (width <= 238) {
                $("#SignWidth").text('55');
                $("#SignWidthValue").val('55');
            }
            else if (width <= 270) {
                $("#SignWidth").text('60');
                $("#SignWidthValue").val('60');
            }
            else if (width <= 302) {
               ...