通讯表单验证消息位置

Question

当用户尝试在没有有效输入的情况下注册我的时事通讯时，表单上有验证文本，此时消息显示在表单的右侧，而不是内联的表单字段下方。结果，这破坏了我的页面设计。如果有人看到我在做什么错，这是html和CSS：

@using (Ajax.BeginForm("SubmitNewsletter", "MailChimp", null, new AjaxOptions { UpdateTargetId = "statusNewsletter", OnSuccess = "newsletterNoty(data)", OnComplete = "clearForm" }))
{
    <div class="newsletter">
        <div class="row titleNewsletter d-flex justify-content-center">
            <h1>Subscribe to our newsletter</h1>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 d-flex justify-content-center form-group">
                <label for="firstname" class="sr-only">First Name</label>
                @Html.TextBoxFor(x => Model.FirstName, "", new { @class = "form-control-lg bg-dark", placeholder = "First Name", })
                @Html.ValidationMessageFor(x => Model.FirstName, "", new { @class = "validate", })

            </div>
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 d-flex justify-content-center form-group">
                <label for="lastname" class="sr-only">Last Name</label>
                @Html.TextBoxFor(x => Model.LastName, "", new { @class = "form-control-lg bg-dark", placeholder = "Last Name" })
                @Html.ValidationMessageFor(x => Model.LastName, "", new { @class = "validate", })

            </div>
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 d-flex justify-content-center form-group">
                <label for="email" class="sr-only">Email Address</label>
                @Html.TextBoxFor(x => Model.Email, "", new { @class = "form-control-lg bg-dark", placeholder = "email@example.com" })
                @Html.ValidationMessageFor(x => Model.Email, "", new { @class = "validate", })
            </div>
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-3 d-flex justify-content-center form-group">
                <button type="submit" id="submit" class="btn-lg bg-dark">Sign Up</button>
            </div>
        </div>
        <div id="statusNewsletter"></div>
    </div>

}

//////////////CSS for validation message///////////

.validate {
    color: #BA5555;
    display: block; (this doesn't seem to work with d-flex in html :()
    text-align: center;
}