在Vuetify中更改两个不同v-col的高度

如何在v行中使用两个v-col在vuetify中实现这种样式？

我已经尝试用自己的逻辑来重新创建它，但是看起来像这样。我也尝试更改CSS中单个v-col的高度，但它也反映了另一个v-col的高度。例如，我尝试将第一个v-col的高度更改为100px，它也会更改另一个v-col的高度。

 <v-row>
      <v-col cols="4">
        <v-list color="#fdf6f1" shaped>
          <v-list-item-group>
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-content>
                <v-list-item-title
                  v-text="item.title"
                  @click="checkEvent(i)"
                  style="font-size: 25px"
                ></v-list-item-title>
                <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>

      <v-col>
        <div v-if="chosenDay === 0">
          <FirstDay />
        </div>
        <div v-else-if="chosenDay === 1">
          <SecondDay />
        </div>
        <div v-else-if="chosenDay === 2">
          <ThirdDay />
        </div>
        <div v-else-if="chosenDay === 3">
          <FourthDay />
        </div>
        <div v-else>
          <FifthDay />
        </div>
      </v-col>
    </v-row>