Estoy creando un formulario con VueJS y bootstrap. Creé una b-fila que incluye tres columnas, una para el nombre completo, en segundo lugar para la Dirección y por último una casilla de verificación. Pero sus columnas deben mostrarse en la misma línea y, en segundo lugar, las columnas deben tener un ancho completo del 50% y no estar separadas de otras. Estoy compartiendo mi código también mi captura de pantalla.

 <b-form class="mt-3"> <b-row> <b-col cols="6"> <b-form-group id="name" label="Full Name" label-for="name"> <b-form-input id="name" type="text" placeholder="John Gonzales" v-model="user.name" ></b-form-input> </b-form-group> </b-col> <b-col cols="4"> <b-form-group id="address" label="Address" label-for="Address"> <b-form-input id="" type="text" v-model="user.address" placeholder="Reter 43"> </b-form-input> </b-form-group> </b-col> <b-col cols="2"> <b-form-checkbox id="checkbox-1" v-model="status" name="checkbox-1" value="accepted" unchecked-value="not_accepted"> Use Google Location </b-form-checkbox> </b-col> </b-row> </b-form >

Nota: Como puede ver, configuré en segundo lugar col cols-4 para ocupar el espacio para la casilla de verificación , pero no es la opción correcta, también usé el extremo flexible para la casilla de verificación, pero no funciona. Mi resultado final debería ser exactamente por figma:

¿Conoce alguna práctica recomendada sobre cómo mostrar en la misma línea uno al lado del otro?

Gracias de antemano.