Vuetify justify-end for v-col

Question

I'm trying to fit two v-cols inside of a v-row, one being 2 cols wide and the other 10. The for-loop (or default behavior) of v-cols seems to be causing the v-cards after the first 2 to stick to the left side of the screen, when I'd want to them to keep in the same alignment as the top two cards. The first set of v-cols is a side component, while the second v-col is for a grid.

Is there a way I can make all the v-cards in the grid justify to the right side so that they wouldn't revert back to the left side once the side component ends?

<template>
  <div>
    <TopNavbar />
    <v-app id="bigGrid">
      <div>
        <v-container>
          <v-row class="grey" align-md="right">
            <v-col cols="12" sm="12" md="12" lg="2" xl="2">
              <v-card class="pa-8" style="height: 30vh" outlined title>
                Side Stuff
              </v-card>
            </v-col>
            <v-col
              justify="end"
              v-for="n in 6"
              :key="n"
              cols="12"
              md="5"
              lg="5"
              xl="5"
            >
              <v-card style="height:25vh" class="pa-8" outlined title>
                <v-card-title> Category Name</v-card-title></v-card
              >
            </v-col>
          </v-row>

          ></v-container
        >
      </div></v-app
    >
  </div>
</template>

Codepen Link:

Answer 1

My updated code is as follows

<div id="app">
  <v-app id="bigGrid">
    <div>
      <v-container>
        <v-row class="grey" align-md="right">
          <v-col cols="12" lg="2">
            <v-card class="pa-8" style="height: 30vh" outlined title>
              Side Stuff
            </v-card>
          </v-col>
          <v-col cols="12" lg="10">
            <v-row>
              <v-col
                v-for="n in 6"
                :key="n"
                cols="12"
                md="5"
              >
                <v-card style="height:25vh" class="pa-8" outlined title>
                  <v-card-title> Category Name</v-card-title></v-card
                >
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-app>
</div>

1. Main page should be wrapped into another <v-col> component and grid components can go inside it(<v-row> in this case)
2. justify="end" is applied to component
3. <v-col cols="12" sm="12" md="12" lg="2" xl="2"> can be minimized to <v-col cols="12" lg="2">. And the samething for <v-col justify="end" v-for="n in 6" :key="n" cols="12" md="5" lg="5" xl="5">