I want to create a text field in vuetify

Issue

https://i.stack.imgur.com/zbCfI.png

I want to create a text field in vuetify but the button can't be made like this? and for the height but it can't it be changed? I've tried several times to change the height and it doesn't work

I already have the css but it's hard to use on vuetify

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

Solution

Problem Statement: Want to create the text field with button in Vuetify.

Solution:

HTML:

<v-app id="app">

  <v-container>
  
    <v-text-field
      label="Chassis Number"
      color="primary"
      v-model="input"
      @keypress.enter="show">
  
       <template v-slot:append>
  
          <v-btn
            depressed 
            tile
            color="primary"
            class="ma-0"
            @click="show">
          
            show
            
          </v-btn>
        
      </template>
        
    </v-text-field>
      
  </v-container>
  
</v-app>

Vue.js:

new Vue({
  el: "#app",
    vuetify: new Vuetify(),
  data: {
    input: ''
  },
  methods: {
    show(){
      alert(this.input)
    }
  }
})

Output:

Answered By - Praveen Chandramohan CSE