how can I build such a layout using vuetify grid?

Question

I'm trying to build the form below using vuetify grid.

so far I've only been able to achieve this:

     <v-row>
        <v-col cols="8">
          <v-container>
            <v-row no-gutters>
              <v-col cols="12" class="d-flex">
                <v-text-field
                  name="title"
                  label="نام فارسی محصول"
                  outlined
                  placeholder=" "
                  v-model="products.title"
                  class="ml-1"
                ></v-text-field>
                <v-text-field
                  name="subtitle"
                  label="نام انگلیسی محصول"
                  outlined
                  placeholder=" "
                  v-model="products.subtitle"
                  class="ml-1"
                ></v-text-field>
                <v-text-field
                  name="image"
                  label="آدرس عکس محصول"
                  outlined
                  placeholder=" "
                  v-model="products.image"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea
                  name="description"
                  outlined
                  label="توضیحات محصول"
                  placeholder=" "
                  v-model="products.description"
                ></v-textarea>
              </v-col>
            </v-row>
          </v-container>
        </v-col>
        <v-col cols="4">
          <v-img :src="require('@/assets/images/upload.png')"></v-img>
        </v-col>
        <v-col cols="12">
          <v-divider light></v-divider>
        </v-col>
      </v-row>

I have problem lining up the forms with the edges of the upload image and I can't get the textarea to take up the whole height. does anyone have any idea how I can achieve such layout using vuetify? thank you.

Answer 1

You should put your code in v-app tag like this codepen sample