Aligning vue components with icons and without icons - vuejs2

Question

I am designing a form with drop downs. I put an icon near start time. Start time and end time are on the same line for large screen and on 2 separate lines for a mobile device. However, the components are not lining up properly. For mobile, I want end time drop down, duration, and save button to each be on their own line and to be under (and flush with) the start time drop down, not under the start time icon.
For large screen, I want duration and save button to be aligned with start time drop down, not the icon.
Any help is appreciated. code and screenshots below.
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>