Bootstrap 3 inline input elements with label

Question

I am trying to achieve an inline form in a very small column something like this:

I have written some code which hopefully works in chrome in col-lg-x , but any other size than that , then my form collapses and goes to a new row of column.

Here is my code:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="form-group">
                <div class="form-inline">
                    <label style="
    font-size: 12px;
    max-wdith: 20% !important;
    width: 15%;
    padding-left: 5px;
    /* padding-right: 5px; */
">From</label>
                    <input class="form-control" placeholder="Email" type="text" style="
    padding: 0;
    border-radius: 2px !important;
    font-size: 13px;
    height: 25px;
    color: grey;
    /* margin-top: 3px; */
    width: 35%;
"> &nbsp;
                    <label style="
    font-size: 12px;
    max-wdith: 20% !important;
    width: 10%;
    /* padding-left: 5px; */
    /* float: left; */
    text-align: right;
">to</label>
                    <input class="form-control" placeholder="Password" type="password" style="
    padding: 0;
    border-radius: 2px !important;
    font-size: 13px;
    height: 25px;
    color: grey;
    /* margin-top: 3px; */
    width: 31%;
">
                </div>
            </div>
        </div>
    </div>
</div>

why is this happening? is there any way to fix this?

Note: Here by resizing i mean , to resize the browser to check for different screen sizes.

Answer 1

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="form-group">
                <div class="form-inline">
    <style>
      
      .myfield{
          border: 1px solid #ccc!important;
          border-radius: 4px!important;
          font-size: 13px;
          height: 25px;
          color: grey;
          max-width: 100px !Important;
          width: 31%;
          padding: 2px 10px;
          box-shadow: inset 0px 0px 11px -5px #000;
      }
      input:focus{
          outline: initial;
          box-shadow: inset 0px 0px 11px -5px red;
      }
      label{
          font-size: 12px;
          max-width: 20px !important;
          width: 15%;
          padding-left: 5px;
      }

      @media screen and (min-width: 400px) {
         #Add here your code for different type of screen resolution
         .myfield{
             #My custom code here
             max-width: 80px !Important;
             width: 10%;
         }
      }
    </style>
                    <label>From</label>
                    <input class="form-control myfield" placeholder="Email" type="text" > &nbsp;
                    <label>to</label>
                    <input class="form-control myfield" placeholder="Password" type="password"  >
                </div>
            </div>
        </div>
    </div>
</div>