将vue组件与图标对齐而不与图标对齐

Question

我正在设计带有下拉菜单的表单。我在开始时间附近放了一个图标。对于大屏幕，开始时间和结束时间在同一行上，对于移动设备，开始时间和结束时间在同一行上。但是，这些组件未正确排列。对于移动设备，我希望结束时间下拉列表，持续时间和保存按钮分别位于自己的行上，并且位于之下（并与之匹配）开始时间下拉列表，不。 对于大屏幕，我希望持续时间和保存按钮与开始时间下拉菜单（而不是图标）对齐。

感谢您的帮助。代码和屏幕截图。

App.vue：

<template>
<div id="app">

<v-app id="inspire"> 

<Header/> 
<v-content>
<v-container fluid>
  <router-view></router-view>
</v-container>
</v-content>



 </v-app> 
 </div>
</template>

Session.vue：

      <template>
      <div id = 'newSession'> 


        <v-layout align-center justify-center >
      <v-flex xs18 sm10 md8>



      <div>
          <fieldset> 
              <legend align="left">Add New Session</legend> 

            <v-alert
              :value="invalidStartTimeorEndTime"
              type="warning"  
            >
              Start Time or End Time is invalid.
            </v-alert>


      <form @submit.prevent="submit">

            <v-layout row align-baseline>

            <!--menu allows the date-picker to show and not show -->
            <v-menu   
              ref="menu2"
              :close-on-content-click="false"
              v-model="menu2"
              :nudge-right="40"
              :return-value.sync="date"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              min-width="290px"
            > 
              <v-text-field
                slot="activator"
                v-model="date"
                label="Session Date"
                prepend-icon="event"
                box
                readonly

              ></v-text-field>

            <v-date-picker v-model="date" @input="$refs.menu2.save(date)"  ></v-date-picker>

          </v-menu> 

          <label  color="indigo" background-color= "indigo" text-color="white"> {{getWeekendDate}} </label> <!-- colors x working -->

          </v-layout>


          <v-layout v-bind="binding">        

              <!-- <v-layout row> -->
              <!-- <v-icon>access_time</v-icon> -->


              <v-select
                :items="times"
                v-model="start_time"
                label="Start Time"
                prepend-icon="access_time"
                box
                placeholder="Start Time"
                ></v-select>


              <v-select
                :items="times"
                :value="getEndTime"
                label="End Time"
                box
                placeholder="End Time"
                @change="changeEndTime"          
              ></v-select>

              </v-layout>

              <v-layout column align-left >


                <div class="flex">

              <label>{{getDuration}}</label>

              <v-btn color="indigo" type ="submit" dark>Save</v-btn>

              </div>

              </v-layout>




      </form>

          </fieldset>
          </div>


          </v-flex>
        </v-layout>

      </div>

      </template>