Two columns height equal using css - html

Question

Inside container div i have two columns. Column 1 height is dynamic, I want column 2 height to match according with column 1. I tried using display: table property but it's not working. How can i achieve it using css? I get this problem when column 1 displays errors and it's height increases. How do i set both column same height using css?
HTML
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">
<div class="row">
<div class="col-md-7 pr-0">
<section class="tile new-su-tile1">
<!-- tile body -->
<div class="tile-body p-40">
<form name="signupForm" role="form" ng-submit="userSignupMethod(signupForm)" novalidate>
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="firstname" ng-model="userSignup.firstname"
ng-pattern="/^[a-zA-Z\s]*$/" required autocomplete="off" placeholder="Your Name" id="firstname" >
<span ng-messages="((signupForm.firstname.$touched && signupForm.firstname.$error) || (signupForm.$submitted && signupForm.firstname.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid name.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="lastname" ng-model="userSignup.lastname"
ng-pattern="/^[a-zA-Z\s]*$/"
required autocomplete="off" placeholder="Your Last Name" id="lastname" >
<span ng-messages="((signupForm.lastname.$touched && signupForm.lastname.$error) || (signupForm.$submitted && signupForm.lastname.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid name.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="email" ng-model="userSignup.email"
ng-pattern="/^[a-zA-Z0-9._]+[a-zA-Z0-9._]+#[a-z-A-Z.]{2,50}$/" required autocomplete="off" id="email" placeholder="Your Email ID">
<span ng-messages="((signupForm.email.$touched && signupForm.email.$error) || (signupForm.$submitted && signupForm.email.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid email.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" ng-model="userSignup.contactnumber"
ng-pattern="/^[0-9]{10,15}$/" autocomplete="off" id="contactnumber" placeholder="Mobile Number" minlength="10" maxlength="15">
<span ng-messages="((signupForm.contactnumber.$touched && signupForm.contactnumber.$error) || (signupForm.$submitted && signupForm.contactnumber.$error))"
role="alert">
<span class="error_msg" ng-message="pattern">Please enter valid contact number.</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<button class="btn btn-block btn-login b-0 br-2 mr-5" analytics-event="click" analytics-category="sign up">Sign Up</button>
</div>
</div>
<!-- Modal HTML ng-disabled="enquiryForm.$invalid "-->
<div id="successSignUp" class="modal fade modal-md thank-you">
<div id="loadingImag" ng-if="loadingImag" class="content-center">
<a href="" class="myIcon icon-info icon-ef-6 icon-color">
<i class="fa fa-refresh fa-spin fa-3x"></i>
</a>
</div>
<div id="messageBox" ng-if="messageBox" class="modal-dialog modal-sm">
<div class="modal-content content-center modal-md ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">x
</button>
<h2 class="modal-title">Thank You</h2>
</div>
<div class="modal-body">
<div class="ng-scope ng-binding" ng-class="messageColor ? 'text-success' : 'text-lightred'" data-ng-repeat="alert in alerts">
{{alert.message}} <br>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-sm btn-ef btn-ef-3"
ng-click="redirecttoSinup()">OK
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /tile body -->
<!-- tile footer -->
<div class="tile-footer new-tile-footer text-center ">
<!-- SUBMIT BUTTON -->
<p class="pt-5">Already a user?
<a ui-sref="login" class="login-link">Log in to your account</a></p>
</div>
<!-- /tile footer -->
</section>
<!-- /tile -->
</div>
<div class="col-md-5 pl-0">
<section class="tile new-su-tile2">
<div class="ysu-heading pt-36">Why Sign Up?</div>
<ul class="pl-0">
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Apply & Manage your Visa Applications with Ease</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Store all Visa related documents in one secure vault for easy future reference </li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Access your Visa related documents anytime, anywhere all ine one place</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>All your data is stored making re-applying easier and faster</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Automatically fills in your Visa form next time you need to travel</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Tag your family as applicants</li>
</ul>
</section>
</div>
</div>
</div>
</div>
<div ng-include="'components/navbar/quick-links.html'"></div>
</div>
CSS (less format)
.new-su-tile1 {
& .form-control {
height: 38px;
border: 1px solid #acacac;
font-style: normal;
}
& .error_msg {
font-size: 10px;
}
& .btn-login {
background: #32a9de;
}
}
.new-su-main-tile2 {
margin-left: -1px;
& .new-su-tile2 {
min-height: 308px;
#media ( max-width:#screen-xs-max) {
border-left: 1px solid #acacac;
margin-left: 15px;
margin-right: -15px;
}
#media ( max-width:#screen-sm-max) {
border-left: 1px solid #acacac;
margin-left: 15px;
margin-right: -15px;
}
& .ysu-heading {
color: #86c049;
text-align: center;
}
& .ysu-subheading {
list-style: none;
color: #333333;
list-style: none;
display: inline-flex;
font-size: 12px;
text-align: left !important;
padding: 8px 0;
&:first-child {
padding-top: 25px;
}
/*&:last-child {
padding-bottom: 29px;
}*/
& .ysu-icon {
font-size: 10px;
}
}
}
}
.new-tile-footer {
background: #fff;
color: #333333;
font-size: 12px;
& .login-link {
color: #32a9de !important;
}
}

Answer 1

#user6371206 Please check following example. i hope you are expecting the same.
var elements = document.getElementsByClassName('features');
var elementHeights = Array.prototype.map.call(elements, (el) => {
return el.clientHeight;
});
var maxHeight = Math.max(...elementHeights)
Array.prototype.forEach.call(elements, (el) => el.style.height = `${maxHeight}px`);
.a { height: 30px; background-color: red; }
.b { height: 220px; background-color: aqua; }
.c { height: 50px; background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="features a"></div>
<div class="features b"></div>
<div class="features c"></div>