Mantaining field alignment across rows

<div class="Table">
    {#each patients as patient, i}
        <div class="row">
            <div class="patient-details">
                <p class="patient-name">
                    {patient.name + ' ' + patient.lastName}
                </p>
                <p class="patient-id">
                    {patient.pid}
                </p>
            </div>
            <div class="appointment-date">
                <p>{patient.lastAppointment}</p>
            </div>
            <div class="actions">
                <a href={`/${patient.id}`}>
                    <ArrowRight />
                </a>
            </div>
        </div>
    {/each}
</div>

<style>
    .Table {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .row {
        background-color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-radius: 5px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .patient-name {
        font-weight: bold;
    }

    .actions {
        display: flex;
        gap: 0.5rem;
    }
</style>