bulma: horizontal form controls not expanded correctly

Question

I have one text input and 2 selects that I want to put them horizontally. based on bulma css framework, that what I'm supposed to do:

<div class="field is-horizontal">
  <div class="field-body">
     <div class="field">
        <p class="control is-expanded has-icons-left">
           <input class="input" type="text" placeholder="Search" name="id" id="id">
           <span class="icon is-small is-left"><i class="fa fa-search"></i></span>
        </p>
     </div>
     <div class="field">
        <p class="control">
           <span class="select">
              <select name="status" id="status">
                 <option value="">Status:</option>
                 <option value="active">active</option>
                 <option value="pause">pause</option>
              </select>
           </span>
        </p>
     </div>
     <div class="field">
        <p class="control">
           <span class="select">
              <select name="limit" id="limit">
                 <option value="">Limits:</option>
                 <option value="10">10</option>
                 <option value="20">20</option>
              </select>
           </span>
        </p>
     </div>
  </div>

normally the last 2 selects should take their real width and the first input should expand until it takes the available space, but this is what i'm getting:

Answer 1

Add is-narrow to the fields you want to be narrow:

<div class="field is-narrow">

Working example: https://jsfiddle.net/wostex/ut4nedq2/