wpcj7-not-valid-tip breaking Bootstrap form layout

Hi,

I’m creating a website using Bootstrap and WPCF7, and it seems that whenever you use Bootstrap’s .input-group-addon, the layout breaks if the form submission is invalid, as shown in the following:

Form: https://i.imgur.com/n6XxOnq.png
Form after invalid submission: https://i.imgur.com/QDjAIK7.png

As you can see, the layout is broken. This is because .wpcf7-not-valid-tip is added directly after the <input> element, and Bootstrap requires various containers around form elements – so it’s essentially being inserted in the middle of a container when it should be inserted afterwards.

If it helps at all, here is my form code from WPCF7 options:

<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="contactName" class="sr-only">Name</label>
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-user fa-fw"></span>
</div>
[text* contactName maxlength:30 id:contactName class:form-control placeholder "Name"]
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contactEmail" class="sr-only">Email address</label>
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-envelope-o fa-fw"></span>
</div>
[email* contactEmail minlength:6 maxlength:50 id:contactEmail class:form-control placeholder "Email address"]
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="contactPhone" class="sr-only">Phone number (optional)</label>
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-phone fa-fw"></span>
</div>
[tel contactPhone minlength:6 maxlength:16 id:contactPhone class:form-control placeholder "Phone number (optional)"]
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-pencil fa-fw"></span>
</div>
[textarea* contactMessage x4 id:contactMessage class:form-control placeholder "Message"]
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
[submit id:submit class:form-control "Send"]
</div>
</div>
</div>
</form>

Do you have any suggestions for how to fix this, preferably without removing the input-group-addon sections from the form?

note: if I manually move .wpcf7-not-valid-tip (using inspector) to after div.input-group, the issue is fixed – is there a way of doing this automatically?

Thanks in advance. ??