How to set max height of a component to be the end of the component on top?

Question

I want to set the maximum height of a card to be the end of a map component, so that card will only appear at the black box at bottom and will not overflow to the map. See my shitty Paint:

So something like this but the beginning of the row 2 is determined by the end of the row 1. (cols doesn't matter, they are flexible)

  <!-- Google Map -->
  <GoogleMap api-key="" style="width: 100%; height: 500px" :center="{ lat: 40.689247, lng: -74.044502 }" :zoom="3"
    id="google-map">
  </GoogleMap>

  <!-- Marker details card -->
  <v-card class="mx-auto d-flex flex-column h-auto w-auto"
    style="position: absolute; bottom: 0; right: 0; z-index: 1000">
    <!-- close button at top right -->
    <v-btn icon @click="renderMarker = false" style="position: absolute; top: 0; right: 0; z-index: 1" max-width="50"
      max-height="50">
      <v-icon>mdi-close</v-icon>
    </v-btn>
    <v-card-item :title="MRE">
      <template v-slot:subtitle>
        <div>
          <v-icon class="me-1 pb-1" color="error" size="18"></v-icon>
          0.0
        </div>
        <div>
          <v-icon class="me-1 pb-1" color="error" icon="mdi-calendar-range" size="18"></v-icon>
          0.0
        </div>
      </template>
    </v-card-item>

    <v-card-text class="py-0">
      <v-row align="center" no-gutters>
        <v-col class="text-h2" cols="6">
          0.0
        </v-col>

        <v-col class="text-right" cols="6">
          <v-icon color="error" icon="mdi-waveform" size="88"></v-icon>
        </v-col>
      </v-row>
    </v-card-text>

    <div class="d-flex py-3 justify-space-between">
      <v-list-item density="compact" prepend-icon="mdi-map-marker-radius">
        <v-list-item-subtitle>
          Latitude: 0.0
          Longitude: 0.0
        </v-list-item-subtitle>
      </v-list-item>
    </div>
  </v-card>

any help is more than welcome.