Vue.js Vuetify将列表对齐到父卡的右侧

我是Vue和Vuetify的新手，但我正在尝试在v卡中放置一个搜索栏，但要将其与卡的右侧对齐。卡片本身跨越整个页面（减去填充），但我希望搜索栏的宽度是固定的，并且位于卡片的右侧。我可以设置列表的宽度，但我无法找到如何将搜索栏定位在卡片右侧的答案

<v-card>
    <v-card-title>Card Title</v-card-title>
    <v-list width="500">
        <v-list-item>
            <v-text-field
                v-model="search"
                append-icon="mdi-magnify"
                label="Search"
                single-line
                hide-details
            ></v-text-field>
        </v-list-item>
    </v-list>
</v-card>

卡片标题

我通过在v-card上添加flex属性，然后在末尾证明v-list-item是正确的，从而解决了这个问题。看起来是这样的：

<v-card class="d-flex-column">
    <v-card-title>Card Title/v-card-title>
    <v-list>
        <v-list-item class="d-flex justify-end mt-n9">
            <v-text-field
                v-model="search"
                append-icon="mdi-magnify"
                label="Search"
                single-line
                hide-details
                class="shrink"
            ></v-text-field>
        </v-list-item>
    </v-list>
</v-card>

卡片标题/v-卡片标题>