Kendo UI validation message breaks bootstrap layout - css

Question

I have a form to collect user information which is designed using bootstrap. I am using Kendo UI validation for validating user input.
This is a portion of the form.
Html for the first line of the form.
<div class="col-lg-4">
<div class="form-group">
<label for="FirstName">First Name:</label>
<div class="input-group">
<input type="text" id="FirstName" name="FirstName" class="form-control" placeholder="First name" />
<span class="input-group-addon" id="FirstNameAddon">
<input type="checkbox" id="unkFirstName" value="Unknown" />Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="LastName">Last Name:</label>
<div class="input-group">
<input type="text" id="LastName" class="form-control" placeholder="Last name" />
<span class="input-group-addon" id="LastNameAddon">
<input type="checkbox" id="unkLastName" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="Initials">Initials:</label>
<div class="input-group">
<input type="text" id="Initials" class="form-control" placeholder="Initials" />
<span class="input-group-addon" id="InitialsAddon">
<input type="checkbox" id="unkInitials" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
Everything is fine with the layout if there is not validation message. But when there is a validation message layout goes ugly.
How can I make the validation message to span across both input and add-on? How to make the validation message to float on top of the controls so that it won't effect the controls next to it even if message is longer?
Here is the Kendo Dojo http://dojo.telerik.com/ihANu that replicates the issue. Look in full screen http://runner.telerik.io/fullscreen/ihANu
Thank you.

Answer 1

You could try taking it out of the normal flow and overlaying it ontop of the screen so that it didn't disrupt the other elements by adding position: absolute
.k-widget.k-tooltip-validation.k-invalid-msg {
position: absolute;
top: 100%;
left: 0;
}
Demo in Dojo

Answer 2

KyleMit answer is good and one way to do it. I prefer using validator message custom positioning which is Kendo UI validator functionality. U can place validator message where ever u want using single line of html. Just place input id for data-for attribute to connect it to right input element.
<span class="k-invalid-msg" data-for="input-id"></span>