How to position a v-row at the end of a v-tab-item

I currently have a v-tab vuetify and inside it a v-tab-item containing three v-rows. I'm trying to align the last v-row to the end of the container as shown in the attached image.

Below is the code example

    <v-container class="pa-0">
        <v-card flat>
          <v-tabs fixed-tabs>
            <v-tab>
              tab 1
            </v-tab>
    
            <v-tab>
              tab 2
            </v-tab>
    
            <v-tab-item>
              <v-row
                style="border: 2px solid red;"
                no-gutters
              >
                <v-col>
                  Lorem ipsum...
                </v-col>
              </v-row>
    
              <v-row
                style="border: 2px solid purple;"
                no-gutters
              >
                <v-col>
                  Lorem ipsum...
                </v-col>
              </v-row>
    
              <v-row
                style="border: 2px solid orange;"
                no-gutters
              >
                <v-col>
                  Lorem ipsum...
                </v-col>
              </v-row>
            </v-tab-item>
          </v-tabs>
        </v-card>
    </v-container>

Wrap the rows that belong at the top and at the bottom in different divs, then make the parent a flex column with justify space-between

<v-tab-item class="row-container">
  <div class="top-rows">
    <v-row style="border: 2px solid red" no-gutters>
      <v-col> Lorem ipsum... </v-col>
    </v-row>
    <v-row style="border: 2px solid purple" no-gutters>
      <v-col> Lorem ipsum... </v-col>
    </v-row>
  </div>

  <div class="bottom-rows">
    <v-row style="border: 2px solid orange" no-gutters>
      <v-col> Lorem ipsum... </v-col>
    </v-row>
  </div>
</v-tab-item>

.row-container {
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

codepen example