panel.vue

<template>
  <v-app>
    <v-content>
      <v-container>
        <v-expansion-panel v-model="panel" inset>
          <v-expansion-panel-content>
            <template slot="header">
              <v-flex
                tag="v-list-item-content"
                xs3
              >
                <v-subtitle-2>Trip name</v-subtitle-2>
              </v-flex>
              <v-list-item-content>
                <v-subtitle-1>Caribbean cruise</v-subtitle-1>
              </v-list-item-content>
            </template>
          </v-expansion-panel-content>
          <v-expansion-panel-content>
            <template slot="header">
              <v-flex
                tag="v-list-item-content"
                xs3
              >
                <v-subtitle-2>Location</v-subtitle-2>
              </v-flex>
              <v-list-item-content>
                <v-subtitle-1>{{ location }}</v-subtitle-1>
              </v-list-item-content>
            </template>
            <v-card>
              <v-layout
                align-center
                tag="v-card-text"
                justify-space-between
              >
                <v-combobox
                  background-color="grey lighten-4"
                  chips
                  v-model="location"
                  deletable-chips
                  hide-details
                  solo
                  flat
                ></v-combobox>
                <v-spacer></v-spacer>
                <v-card
                  class="elevation-1"
                >
                  <v-card-text>
                    <v-caption>Select your destination of choice</v-caption>
                    <div>
                      <a href="#">Learn more</a>
                    </div>
                  </v-card-text>
                </v-card>
              </v-layout>
            </v-card>
          </v-expansion-panel-content>
          <v-expansion-panel-content>
            <template slot="header">
              <v-flex
                tag="v-list-item-content"
                xs3
              >
                <v-subtitle-2>Start and end dates</v-subtitle-2>
              </v-flex>
              <v-list-item-content>
                <v-subtitle-1 class="layout justify-start">
                  <span class="grey--text">Start date:&nbsp;</span>
                  <span class="mr-5">Feb 29, 2016</span>
                  <span class="grey--text">End date:&nbsp;</span>
                  <span>Not set</span>
                </v-subtitle-1>
              </v-list-item-content>
            </template>
          </v-expansion-panel-content>
          <v-expansion-panel-content>
            <template slot="header">
              <v-flex
                tag="v-list-item-content"
                xs3
              >
                <v-subtitle-2>Carrier</v-subtitle-2>
              </v-flex>
              <v-list-item-content>
                <v-subtitle-1>The best cruise line</v-subtitle-1>
              </v-list-item-content>
            </template>
          </v-expansion-panel-content>
          <v-expansion-panel-content>
            <template slot="header">
              <v-flex
                tag="v-list-item-content"
                xs3
              >
                <v-subtitle-2 class="mb-1">Meal preferences</v-subtitle-2>
                <v-caption class="grey--text">Optional</v-caption>
              </v-flex>
              <v-list-item-content>
                <v-subtitle-1>Vegetarian</v-subtitle-1>
              </v-list-item-content>
            </template>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      location: 'Barbados',
      panel: 1
    })
  }
</script>