Vuetify : 2 rows in a card

I tried to create new row to place my table component there, and I want it to take the entire row

I’ve tried

<v-col cols="12">
    <Table />
</v-col>

It goes to the right

enter image description here

I’m trying to have 2 rows in a card

  • first row (icon) + title & subtitle
  • second row table

enter image description here

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-col cols="12">
                <v-card elevation="2" class="d-flex">
                    <!-- Icon -->
                    <v-col cols="1">
                        <v-card-title>
                            <v-btn text color="black">
                                <v-icon left x-large>{{ icon }}</v-icon>
                            </v-btn>
                        </v-card-title>
                    </v-col>

                    <!-- Title & Subtitle -->
                    <v-col cols="11">
                        <v-card-title>
                            {{ title }}
                        </v-card-title>
                        <v-card-subtitle style="color: #757575"> {{ subtitle }} </v-card-subtitle>

                        <Table />
                    </v-col>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>