Vuejs & Tailwind CSS dynamically adding two input fields with one button click

I'm using vue 3 and tailwind css to build an interface and I'm trying to add two different input fields, after clicking the add button, and remove the two fields after clicking the remove button. Something like this: https://i.stack.imgur.com/aEg0l.png

Currently, I have it working, but it is showing a wrong format. When I click the add button, it shows two input keys in the first row and two input values in the second row. Wrong Input format: https://i.stack.imgur.com/AxahI.png

When I click on the add button, I want it to show one input key and one input value in the first row, and the same in the next row.

This is the form

<div v-show="type == 'dropdown'" class="grid gap-4 md:grid-cols-5 items-center">
  <div v-for="(value, index) in keys" :key="index" class="col-span-2">
    <input v-model="value.key" type="text" 
       class="block p-2 w-full text-gray-700 bg-gray-50 rounded-sm 
       border border-gray-300" placeholder="Input key" 
	/>
  </div>
  <div v-for="(value, index) in input_values" :key="index" class="col-span-2 ">
      <input v-model="value.input_value" type="text" 
         class="block p-2 w-full text-gray-700 bg-gray-50 
         rounded-sm border border-gray-300" placeholder="Input value" 
       />
   </div>
   <div class="col-span-1">
     <fa icon="square-plus" 
        class="w-6 h-6 text-green-500 cursor-pointer" 
        @click="add" 
     />
      <fa v-show="index != 0" icon="square-minus" 
         class="w-6 h-6 px-2 text-red-500 cursor-pointer" 
         @click="remove(index)" 
       />
    </div>
</div>

The script section

export default {
  name: "App",

  data() {
    return {
      keys: [{ key: "" }],
      input_values: [{ input_value: "" }],
    }
  },

  add() {
      this.keys.push({ key: "" })
      this.input_values.push({ input_value: "" })
    },
    remove(index) {
      this.keys.splice(index, 1)
      this.input_values.splice(index, 1)
    },
}