У меня есть один текстовый ввод и 2 выбора, которые я хочу поместить их горизонтально. на основе структуры bulma css, что я должен делать:
<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: