Kendo UI validation message breaks bootstrap layout

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.

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->

<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>

<!-- end snippet -->

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.

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

<!-- language: lang-css -->

.k-widget.k-tooltip-validation.k-invalid-msg {
  position: absolute;
  top: 100%;
  left: 0;
}

Demo in Dojo