How to make the elements responsive aligned on the left side - vue.js

Question

I tried to make the element 'branch' responsive aligned perfectly below 'status' when I tried to minimize the browser's window, how can I do that? This is what I've got so far result, I've also tried to use #media only screen CSS but still shows no sign of responsiveness, here's my lines of code
`
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<!-- branchstyle -->
<div class="branch">
<div class="col-lg-10 text-right">
<b-form inline label-align-sm="right" style="margin-left: 70px">
<div class="col-sm-2" label for="branch">Branch⠀:</div>
<div class="col-sm-8">
<b-form-input
v-model="text"
style="margin-left: 33px"
></b-form-input>
</div>
<br />
<!-- <div class="input-group col-sm-2">
<b-button variant="outline-dark"></b-button>
</div> -->
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code⠀:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-lg-12 text-right">
<b-form inline label-align-sm="right">
<div class="input-group col-sm-10">
<b-button
variant="dark"
style="margin-left: 205px; margin-top: 5px"
>Search</b-button
>
</div>
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<br />
<br />
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields"></b-table
><br />
</div>
</b-card>
</template>
</base-header>
</template>
<style></style>`
Thanks in advance and hope u have a nice day☺

Answer 1

I try to simulate your issue and implement this code snippet. Because I couldn't see your result in the code snippet, I assume that you want a responsive form that, when the screen minimizes, your inputs are placed into the right section.
I've done some cleaning and improvements for better readability, and I used flex for your responsive issue.
new Vue({
el: "#app",
data: function() {
return {
text: "a",
fields: ['first_name', 'last_name', 'age'],
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
});
.customForm>div {
display: flex;
flex: 1 0 250px;
margin: 1rem;
}
.customForm {
display: flex;
flex-wrap: wrap;
}
.customForm > div > label {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form class="customForm">
<div>
<label>Status:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Branch:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Store Code:</label>
<b-form-input v-model="text" />
</div>
<div>
<b-button variant="dark">Search</b-button>
</div>
</b-form>
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields" />
</div>
</b-card>
</div>