Bootstrap validation error causing form alignment issues - css

Question

In this simple example, when I have a validation error on the First Name input box on the left side of the form, the E-Mail form element gets pushed down the page.
When I have the same error on the right side of the form though, this behavior does not happen.
I don't see any difference in the code. Here are some screen shots. I was unable to get this to work in jsfiddle or codepen, so here is the link to the test page and I've also pasted my html below:
https://www.blastyourresume.com/testing/formalignment/test.cfm
To reproduce the error on that page, type something in the firstname field, then delete it. If you repeat this process on the right side, you don't get the same behavior.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" align="center">
<form name="frmSignup" id="frmSignup" method="post">
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>First Name</label>
<input type="text" placeholder="First Name" id="firstname" name="firstname" maxlength="50" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>Last Name</label>
<input type="text" placeholder="Last Name" id="lastname" name="lastname" maxlength="50" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>E-Mail Address</label>
<input type="text" placeholder="E-Mail" id="email" name="email" maxlength="100" class="form-control">
</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6">
<div class="form-group" align="left">
<label>Confirm E-Mail Address</label>
<input type="text" placeholder="Confirm E-Mail" id="confirmemail" name="confirmemail" maxlength="100" class="form-control">
</div>
</div>
<div class="col-sm-12 col-xs-12 col-md-12">
<button type="submit" name="btnSubmit" class="btn btn-primary" id="btnSubmit"> Submit </button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Flex approach
add display:flex to your parent container. Display flex will make
your columns equal height.
#frmSignup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
Absolute positioning of error messages.
.form-group {
position: relative;
}
.errormessageclass {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}

Answer 2

For some reason when validation message is shown for the first name input it causes email field to be pushed left and confirm email goes to the next row. I found that it could be fixed if you wrap you form groups in <div class="row"></div> like:
<div class="row">
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>first name</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>last name</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>email</div>
</div>
<div class="col-sm-6 col-xs-12 col-md-6" style="">
<div class='form-group>confirm email</div>
</div>
</div>
https://codepen.io/
But it sound like a rough hack.
I also would be grateful to get an explanation of why pushing effect happens.