alignment issue with lwc

Question

I have a table in which we have 3 mandatory input whenever a value is missing we have a alert message coming below the input but that is causing alignment issue as the input with no error are little below than the input with error. can we make this to appear same level height?

[![enter image description here][1]][1]

<table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer" role="grid">
    <thead>
    <tr>
        <!--<th scope="col" height="22" style="width: 3rem">Nr.</th>-->
        <th scope="col" height="22" ><span class="required">*</span>Creditor Name</th>
        <th scope="col" height="22"><span class="required">*</span>Outstanding Balance</th>
        <th scope="col" height="22"><span class="required">*</span>Minimum Payment</th>
        <th scope="col" height="22" style="width: 3rem"></th>
    </tr>
    </thead>
    <tbody>
    <template for:each={listOfAccounts} for:item="rec">
        <tr key={rec} class="slds-hint-parent">
            <!--<td style="font-weight: bold">
                <lightning-formatted-number value={rec.index}></lightning-formatted-number>.
            </td>-->
            <td>
                <lightning-input required variant="label-hidden"   label="" data-id={rec.index} name="creditorName" pattern ="^[A-Za-z_ ]+$"  value={rec.creditorName} onchange={handleInputChange}></lightning-input>
            </td>
            <td>
                <lightning-input required type="number"  variant="label-hidden" formatter ="currency"  label="" data-id={rec.index} max={loanAmount} name="outstandingBalance" value={rec.outstandingBalance} onchange={handleInputChange} message-when-range-overflow ="Outstanding balance should not exceed the loan amount"></lightning-input>
            </td>
            <td>
                <lightning-input required type="number"  variant="label-hidden" formatter ="currency"  label="" data-id={rec.index} max={loanAmount} name="minimumPayment" value={rec.minimumPayment} onchange={handleInputChange} message-when-range-overflow ="Minimum balance should not exceed the loan amount"></lightning-input>
            </td> 
            <template if:false = "{isOnlyOneRowPresent}">
                <td><lightning-button-icon icon-name="utility:delete" disabled={isOnlyOneRowPresent} alternative-text="Remove" title="Remove" name={rec.index} onclick={removeRow}></lightning-button-icon>
            </td>
        </template>                                               
        </tr>
    </template>
    </tbody>
</table>

Answer 1

Did you try something like that?

<tr key={rec} class="slds-hint-parent row">
...
</tr>

.row {
   display: flex;
   align-item: flex-start;
}