Input Group - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/input-group

HTML

<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-input-group left="$" right=".00" :state="warning">
    <b-form-input></b-form-input>
  </b-input-group>

  <br><br>

  <b-input-group left="Username">
    <b-form-input></b-form-input>

    <!-- Attach Right button -->
    <b-input-group-button slot="right">
      <b-dropdown text="Dropdown" variant="success" right>
        <b-dropdown-item>Action</b-dropdown-item>
        <b-dropdown-item>Action</b-dropdown-item>
      </b-dropdown>
    </b-input-group-button>

  </b-input-group>

</div>

CSS

#app {
  padding: 20px;
  height: 300px;
}

JavaScript

new Vue({
  el: '#app'
})