all v-card expanding while clicking on one

I have two vuetify cards and I want to have a view more section at the end where if I click on view more of a card then the card is expanded to show some more info. However, both the cards expand if I click on one. What should be changed here so that only the card expands on which I’m clicking

codesandbox

<template>
  <v-container class="about-section">
    <v-row class="d-md-flex">
      <v-col cols="12" sm="12" md="4">
        <div class="d-flex flex-start">Experience</div>
      </v-col>
      <v-col cols="12" sm="12" md="8">
        <div class="experience-section">
          <v-card
            class="card-class"
            elevation="1"
            v-for="(item, $index) in experience"
            :key="$index"
          >
            <v-card-text class="d-flex flex-row px-3 py-5">
              <v-avatar size="50" class="mr-2">
                <img
                  src="https://cdn.vuetifyjs.com/images/john.jpg"
                  alt="John"
                />
              </v-avatar>
              <div class="d-flex flex-column">
                <div>{{ item.company }}</div>
                <div>{{ item.designation }}</div>
              </div>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn icon @click.stop="item.show = !item.show">
                <v-icon>{{
                  item.show ? "mdi-chevron-up" : "mdi-chevron-down"
                }}</v-icon>
              </v-btn>
            </v-card-actions>
            <v-expand-transition>
              <div v-show="item.show">
                <v-card-text>
                  {{ item.cardText }}
                </v-card-text>
              </div>
            </v-expand-transition>
          </v-card>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      experience: [
        {
          company: "asljflsa",
          designation: "Developer",
          logo: "https://cdn.vuetifyjs.com/images/john.jpg",
          show: false,
          cardText: "hasodfhaldk",
        },
        {
          company: "oehagl",
          designation: "Developer",
          logo: "https://cdn.vuetifyjs.com/images/john.jpg",
          show: false,
          cardText: "asdfiosjdaf",
        },
      ],
    };
  },
};
</script>

>Solution :

It is a CSS issue: your <v-card> component is growing to the full height of the flex row as long as one or more components in the same row has increased in height.

A quick solution will be to ensure that you have height="fit-content" set on your component:

<v-card
  class="card-class"
  elevation="1"
  height="fit-content"
  v-for="(item, $index) in experience"
  :key="$index"
>

See a working example on your forked CodeSandbox: https://codesandbox.io/s/keen-ganguly-qg9uyu?file=/src/App.vue