Solution 1 :

You can pass the value like this in v-col:


Problem :

I want to align two columns that are side by side.

One column has text and I am able to align the text in the position align="start" which pushes the text to the upper left hand corner of the column.

The second column has an <v-img></v-img> with an svg. I also want the content of the column to be in the position align="start", but the content seems to be in the position align="center".

This is causing the text in the left column to sit higher up on the y-axis than the svg in the right column.

Here is what I have tried:

<v-col xs="12" sm="12" md="12" lg="12" xl="12" class="pl-0">
 <v-row align="start">
   <p class="text-left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How can I get the left and right column contents inline with each other on the y-axis?

Many thanks in advance.


Comment posted by Arun Uniyal

Change the vertical alignment of flex items and their parents using the align and align-self properties.

Comment posted by Joe Berg

this is having no effect. svg is still not aligning start