Creating a one line group of inputs and button that needs to fit into parent div regardless of device size

I am having some trouble understanding vuetify's grid system. Need a form consisting of two text inputs and a button (of fixed width and height) which are to be within one line and fit perfectly in its parent div, regardless of the screen size.

As it stands I am having quite a bit of trouble with this: on my app, either there is a bunch of empty space left on the right side of the screen or the button is being rendered on the next line. Everything needs to be on the same line and to fit perfectly.

I don't seem to quite understand how to operate the grid system to make this happen. Here are two versions of what I have: one with the cols prop and the other with the prop relating to the specific sizes (xs, sm, md, lg).

I've put red border on the parent div so that you can see where I want the text input components to stretch to, while the button must remain always the same size, regardless of the screen. There are a couple problems with my example that I am looking to solve:

• You will see that in both cases there is a bunch of empty space on the right, which I do not want. The text inputs need to expand accordingly and fill in that parent div.

• If you resize the screen, both examples diverge from each other, which makes me wonder how to properly implement this (the cols or the specific size props?)

• The button is slightly higher than the inputs. It needs to be perfectly aligned with them.

new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  template: `
  <div :style="{ border: '4px solid red' }">
  <p>The forms and button above need to fill in the entire div (with maybe a 5px or so margin), on all screen sizes </p>
  <br/>
  <h2>Using cols:</h2>
<v-row no-gutters :style="{ padding: '0 10px' }">
    <v-col cols='4' :style="{ padding: '0 5px', margin: 0 }">
        <v-text-field
            class="input-field"
            label="Field 1"
        />
    </v-col>
    <v-col cols='5' :style="{ padding: '0 5px', margin: 0 }">
        <v-text-field
            class="input-field"
            label="Field 2"
        />
    </v-col>
    <v-col cols='2' :style="{ padding: '0 5px', margin: 0 }">
        <v-btn>
            <v-icon>X</v-icon>
        </v-btn>
    </v-col>
</v-row>

<h2>Using screen size props:</h2>

<v-row no-gutters :style="{ padding: '0 10px' }">
    <v-col xs='4' sm='4' md='4' lg='4' :style="{ padding: '0 5px', margin: 0 }">
        <v-text-field
            class="input-field"
            label="Field 1"
        />
    </v-col>
    <v-col xs='5' sm='5' md='5' lg='5' :style="{ padding: '0 5px', margin: 0 }">
        <v-text-field
            class="input-field"
            label="Field 2"
        />
    </v-col>
    <v-col xs='2' sm='2' md='2' lg='2' :style="{ padding: '0 5px', margin: 0 }">
        <v-btn>
            <v-icon>X</v-icon>
        </v-btn>
    </v-col>
</v-row>

</div>
  `
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="root"></div>

from Creating a one line group of inputs and button that needs to fit into parent div regardless of device size