I am currently developing a login/signup page using Vue and Vuetify. Below is the code I have written for the page (the text is in Italian since I am Italian, but the concept is universal):
<v-row
align="center"
justify="center"
class="prova"
>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
>
<v-card
>
<v-card-title class="center">
Login
</v-card-title>
<v-card-text
class="center"
>
<v-container>
<v-form>
<v-text-field
label="Email"
required
></v-text-field>
<v-text-field
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
label="Password"
counter
@click:append="showPassword = !showPassword"
></v-text-field>
<v-btn
color="primary"
>
Log in
</v-btn>
</v-form>
</v-container>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="10"
lg="3"
md="4"
sm="5"
fill-height
>
<v-card
>
<v-card-title class="center">
Registration
</v-card-title>
<v-card-text class="center">
<v-container >
<div
>Want to access the site
but you're not registered yet?
Click below
to sign up now!</div>
<br>
<v-btn
color="primary"
>
Sign up
</v-btn>
</v-container>
</v-card-text>
</v-card>
</v-col>
</v-row>
When implementing this code, I noticed that the "Sign up" card has a different height than the Login card. Is there a way, preferably using CSS or JavaScript, to make both cards equal in height for better aesthetics?
Thank you! Have a wonderful day!