vuetify 3: text (left-) and button (right) justification within a vuetify <v-list-item>

Question

Using Vue3/Vuetify3 I am attempting to display a list of words, alongside each word a button. The text (word) should be justified left in the row, and the button should be justified right.

The simple (self-contained) example I give below demonstrates the problem: that the button is rendered below the text (and not to the right)

<template>
  <v-app>
    <v-container>
      <v-list>
        <v-list-item
          v-for="(word, index) in words"
          :key="index"
          class="d-flex justify-space-between align-items-center"
        >
          <div class="flex-grow-1">{{ word }}</div>
          <!-- Button aligned to the right -->
          <v-btn size="20" icon color="red lighten-3">
            <v-icon size="20">mdi-minus</v-icon>
          </v-btn>
        </v-list-item>
      </v-list>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const words = ref(["one", "two", "three"]);
</script>

I'd be very grateful if someone could offer their help/advice!

playground example

Answer 1

slots?

<v-list-item v-for="(word, index) in words" :key="index" :title="word">
    <template #append>
        <v-btn size="20" icon color="red lighten-3">
            <v-icon size="20">mdi-minus</v-icon>
        </v-btn>
    </template>
</v-list-item>

Playground