validate和bootstrap 错误提示信息位置无法改变，如何解决？

#validate和bootstrap 错误提示信息位置无法改变
我想让validate提示信息转移到input后 但是修改后会导致input框变短 有什么方法可以让原模型不变的情况下使错误信息位置在input框后？
效果显示

img

html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
  <script src="../lib/jquery-3.6.0.min.js">script>
  <script src="../lib/jquery-validation-1.19.5/dist/jquery.validate.js">script>
  <style>
    a {
      text-decoration: none !important;
    }

    header {
      width: 100%;
      height: 50px;
      border-bottom: 1px rgb(207, 207, 207) solid;
      position: relative;

    }

    .nav {
      width: 200px;
      height: 35px;
      padding-top: 15px;
      padding-left: 20px;
    }

    nav a {
      text-decoration: none;
      color: #777777;
      font-size: 20px;
      height: 100%;
    }

    .login {
      height: 400px;
      background-color: white;
      margin-top: 100px;
    }
    .errorInfo{
            color:red;
          }
    input.error { border: 1px solid red; }

  style>
head>

<body>
  <header>
    <nav class="nav">
      <a href="./index.html">KD Admin v1.0a>
    nav>
  header>
  <main>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-push-3 login">
          <form class="form-horizontal">
            <div class="form-group ">
              <label for="inputEmail3" class="col-sm-2 control-label">账号label>
              <div class="col-sm-10 errorInfo">
                <input type="text" class="form-control" id="inputEmail3" placeholder="请输入邮箱/手机号" name="user">
              div>
            div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">密码label>
              <div class="col-sm-10 errorInfo">
                <input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="pass">
              div>
            div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> 记住我
                  label>
                div>
              div>
            div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" id="btn">登录button>
              div>
            div>
          form>
        div>
      div>
    div>
  main>
body>

<script>
  $(function(){
    $(".form-horizontal").validate({
      rules:{
        user:{
          required:true,
          minlength:5,
          maxlength:20
        },
        pass:{
          required:true,
          minlength:6
        }
      },
      messages:{
        user:{
          required:"账号不能为空！",
          minlength:"账号长度最低为5",
          maxlength:"账号长度最高为20"
        },
        pass:{
          required:"密码不能为空！",
          minlength:"密码长度最低为6"
        }
      }
    });
  });
script>
html>

你先把引入的js文件路径换成资源地址，不然我们还得去找