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!