Vuetify's grid uses [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
- `align-*` operates on the vertical axis - you want to use `justify-*` for the child to translate it horizontally - `align-*` and `justify-*` only work on flex containers, so you can either use a `v-layout` instead of the `v-flex`, or just use both attributes on the same `v-layout`
Here is your [updated code](https://codepen.io/bhavik103/pen/LYPzrop?editors=1000) for you.

Vuetify's grid uses [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
- `align-*` operates on the vertical axis - you want to use `justify-*` for the child to translate it horizontally - `align-*` and `justify-*` only work on flex containers, so you can either use a `v-layout` instead of the `v-flex`, or just use both attributes on the same `v-layout`
Here is a [fixed pen](https://codepen.io/anon/pen/EbxWaR?editors=1000) for you.