Validation Message CSS alignment in ASP MVC - html

Question

I am new to ASP MVC,CSS and html.
Here is what i want to do:
1. Right after an Editorfor("Type" filed in my example), i need a button to display all available options in the database. I have already achieved this by using JQuery UI autocomplete.
2. Validation on this required field. I need to display validation message below the editor box. My code is not working.
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-10">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TestType, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-10">
#Html.EditorFor(model => model.TestType, new { htmlAttributes = new { #class = "form-control" } })
<button id="ShowAllType" class="ui-button ui-widget ui-corner-all" title="Show all existing test types">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</button>
#Html.ValidationMessageFor(model => model.TestType, "", new { #class = "text-danger" })
</div>
</div>
Here is before post.
Here is after post.
As the picture shows, "Description" field is OK. I need help to fix the alignment on "Type" field to display same as Description field. Thanks in advance.
Add CSS and JS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<style>
.ui-autocomplete-loading {
background: white url("../images/ui-anim_basic_16x16.gif") right center no-repeat;
}
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
#ShowAllType {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
#TestType {
position: relative;
display: inline-block;
}
.required:after
{
content: "*";
font-weight: bold;
color: red;
vertical-align:sub;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#TestType").autocomplete({
source: function (request, response) {
$.ajax({
//url: "/EndEffectors/AutoCompleteType",
url: "#Url.Action("AutoCompleteType", "EndEffectors")",
type: "GET",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
$("#TestType").removeClass("ui-autocomplete-loading");
response(data);
}
})
},
complete: function () {
$("#TestType").removeClass("ui-autocomplete-loading")
},
minLength: 0,
messages: {
noResults: "", results: ""
}
});
$("#ShowAllType").on("click", function () {
$("#TestType").autocomplete("search", "");
return false;
});
}
)
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Edit 2: I tried add <br/> after the button, here is the result. Button size is not right.