<div id="app" class="m-3">
   <small-form url="#">
     <div class="col-auto">
       <input type="text" class="form-control">
     </div>
   </small-form>
 </div>
let button = {
  props: ['text'],
  template: `
    <button class="btn btn-primary">
      {{ text }}
    </button>
  `
};

let form = {
  props: ['url'],
  template: `
    <form action="url" method="post">
      <div class="form-row align-items-center">
        <slot></slot>
        <x-button text="Submit"></x-button>
      </div>
    </form>
  `,
  components: {
    'x-button': button
  }
};

var vue =  new Vue({
  el: "#app",
  components: {
    'small-form': form
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/vue/dist/vue.js