Errors in CSS with text overflow: ellipsis in Vuetify columns

Question

I am trying to create a webpage that shows three columns (and always three columns), each representing a "status", comprising of a list of cards representing "projects" like so: As you can see, however, some of the cards have alignment errors in them. I know that the culprit is the name of the project, with SOME (not all) projects with longer names having the errors you see in the image - replacing the name with a short string renders the page with no errors.

Here is the HTML with Vue that renders the columns:

<v-col
    cols="4"
    :id="'status_col_' + allStatuses.indexOf(status)"
    v-for="status in allStatuses.slice(3, 6)"
    :key="status"
>
    <v-card flat dense short class="justify-center vcardstyle">
        ...
    </v-card>
    <v-data-iterator
        ...
    >
        <template v-slot:default="props">
            <draggable group="test" v-model="props.items" @end="updateProjectStatus" :empty-insert-threshold="200">
                <project-card-basic
                    v-for="project in props.items"
                    :id="'project_card_' + project.id"
                    :key="project.id"
                    :project="project"
                    :all-statuses="allStatuses"
                >
                </project-card-basic>
            </draggable>
        </template>

        <template v-slot:no-data>
            ...
        </template>
    </v-data-iterator>
</v-col>

With the child project-card-basic:

<template>
    <v-hover v-slot:default="{ hover }"> 
        <v-card class="cardstyle" :elevation="hover ? 12 : 2">
            <v-card-title>
                <v-row class="wholecard">
                    <v-col align="center" justify="center" class="projname">
                        <v-icon x-small :color="changeColorDependingOnTime()">mdi-checkbox-blank-circle</v-icon>
                    </v-col>
                    <v-col align="left" justify="center" class="refname">
                        NNN_XXX
                    </v-col>
                    <v-col align="left" justify="center" lg="6" class="projname">
                        {{ project.name }}
                    </v-col>
                    <v-col align="right" justify="center" class="priorityCountName">
                        {{ getPriorityCount() }}
                    </v-col>
                    <v-col align="center" justify="center" class="projname">
                        <v-btn text icon :href="getProjectEditURL(project)">
                            <v-icon x-small class="projname">mdi-pencil</v-icon>
                        </v-btn>
                    </v-col>
                </v-row>
            </v-card-title>
        </v-card>
    </v-hover>
</template>

And styling:

.projname {
    font-family: Roboto-Bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.refname {
    font-family: Roboto-Bold;
    font-size: 9px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: -15px;
}

.priorityCountName {
    font-family: Roboto-Bold;
    font-size: 12px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -6.5px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: -10px;
}

.cardstyle {
    margin-left: 10px;
    margin-right: 10px; 
    margin-bottom: 10px; /* Space between each card */
    border-radius: 50px !important;
}

The problem is caused by the text-overflow ellipsis feature, specifically the 'white-space: nowrap' property - removing this fixes the column misalignment completely. At the same time, this error only occurs with the cols attribute set inside the v-col tag (here, set to 4 in the parent). Hence, I'm not sure if the error is due to CSS or due to Vuetify, hence I've tagged this problem with both. I was wondering if anybody else had seen similar issues before and how they might have diagnosed or solved them?

Thanks very much!