Input control text resize according to screen size

Question

I am trying to resize the text in input control when resizing the window as when I decrease the size of window text inside the input control doesn't show completely. This problem is occurring in between width 1032px to 575px. Below 575px width, textbox attains full length of the row and text is can be seen completely. Basically I want text inside input control to resize between width 575px to 1032px. I have tried "vw", "vh" for input control but that keeps on decreasing the size of text even below 575px width.

<div class="sidebar">
  <a href="#" onclick="home_trans()"><i data-feather="home"></i> Home</a>
  <a href="#"><i data-feather="plus-circle"></i> New Travel Application</a>
  <a href="#"><i data-feather="archive"></i> History</a>
</div>

<div class="content">
  <main role="main" class="col-lg-12 col-md-12 col-sm-12 ml-sm-auto px-4">
               <div id='loadingmessage' style='display: none'>
                                     <img id="loading-image" src="Images/Loading.gif" alt="Loading..." />
                </div>
  <div class="form-group" style="margin-top: 90px" id="mai">
                <div class="form-group row">
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Name:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="emp_name" type="text" placeholder="Emp Name" disabled="disabled" />
                    </div>
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Reporting Manager:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="rpg_mgr" type="text" placeholder="Reporting Manager" disabled="disabled" />
                    </div>                    
                    </div>
       <div class="form-group row" style="margin-top: 20px;">
            <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Emp ID:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="emp_num" type="text" placeholder="Emp ID" disabled="disabled" />
                    </div>
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Location:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="loc" type="text" placeholder="Location" disabled="disabled" />
                    </div>
                </div>
      <div class="form-group row" style="margin-top: 20px;">
                    <label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Designation:</label>
                    <div class="col-sm-3">
                        <input runat="server" class="form-control" id="desig" type="text" placeholder="Designation" disabled="disabled" />
                    </div>
                </div>

CSS file for the code above is:

 body {
      margin: 0;
      font-family: "Lato", sans-serif;
      padding-top:55px;
    }
      #loadingmessage {
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       position: fixed;
       display: block;
       opacity: 0.7;
       background-color: #fff;
       z-index: 99;
       text-align: center;
    }

                #loading-image {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 100;
    }
    .feather {
      width: 16px;
      height: 16px;
      vertical-align: text-bottom;
    }
    .sidebar {
      margin: 0;
      padding: 0;
      width: 150px;
      background-color: #f1f1f1;
      position: fixed;
      height: 100%;
      overflow: auto;
      overflow-x:hidden;
      padding-top: 55px;
    }

    .sidebar a {
      display: block;
      color: black;
      padding: 16px;
      text-decoration: none;
    }

    .sidebar a.active {
      background-color: #4CAF50;
      color: white;
    }

    .sidebar a:hover:not(.active) {
      background-color: #555;
      color: white;
    }

    div.content {
      margin-left: 150px;
      margin-top:80px;
      padding-right:16px;
    }

    @media screen and (max-width: 700px) {
      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }
      .sidebar a {float: left;}
      div.content {margin-left: 0;}
      div.content{
          margin-top:unset;
      }
    }

    @media screen and (max-width: 400px) {
      .sidebar a {
        text-align: center;
        float: none;
      }
      div.content{
          margin-top:unset;
      }
    }

Answer 1

Use Media Queries.

/* Set the font-size of .form-control */
.form-control{
  font-size: 16px;
}

/* On screens that are 992px or less, set font-size to 14px */
@media screen and (max-width: 992px) {
  .form-control{
    font-size: 14px;
  }
}

/* On screens that are 600px or less, set font-size to 12px */
@media screen and (max-width: 600px) {
  .form-control{
    font-size: 12px;
  }
}