My attempt to create 3 inputs with the following code:
<div class="col-sm-5 col-md-6">
<form>
<div class="form-row">
<div class="col-0.5 search-label">
<label class="control-label">Search :</label>
</div>
<div class="col">
<input type="text" v-model="company_name" @keyup="userFilterGlobal" class="form-control" placeholder="Company">
</div>
<div class="col">
<input type="text" v-model="fullname" @keyup="userFilterGlobal" class="form-control" placeholder="Fullname">
</div>
<div class="col">
<input type="text" v-model="email" @keyup="userFilterGlobal" class="form-control" placeholder="Email">
</div>
</div>
</form>
</div>
While this setup functions properly, it breaks at different resolutions like shown in https://i.sstatic.net/lI4iO.png.
It remains consistent until a smaller screen causes the input fields to enlarge as seen in https://i.sstatic.net/B4kaY.png.
Is there a way to ensure the input sizes remain the same as pictured when the screen size decreases from the first image?
Test out the code on CodePen: https://codepen.io/anon/pen/oRYZBx