ionic row is not aligned properly

Question

I am having ionic rows in a grid. Each row consists of four labels and an ion-select at the end. but the ion-select is not properly aligned horizontally. Can someone please advise on to how to fix the alignment

                  <ion-grid>

                    <ion-row align-items-center>
                        <ion-col>
                            <label style="font-weight: bolder">Item</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Qty</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Unit Price</label>
                        </ion-col>
                        <ion-col>
                            <label style="font-weight: bolder">Total</label>
                        </ion-col>
                        <ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
                            <label style="font-weight: bolder">Status</label>
                        </ion-col>
                    </ion-row>
                    <ion-row *ngFor="let orderElement of orderElements" align-items-center>
                        <ion-col >
                            <label>{{orderElement.PRODUCT_NAME}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.QUANTITY}} {{orderElement.UNIT}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.UNIT_PRICE}} </label>
                        </ion-col>
                        <ion-col>
                            <label>{{orderElement.UNIT_PRICE * orderElement.QUANTITY}} </label>
                        </ion-col>
                        <ion-col *ngIf="isCustomerView === false || selectedOrder.STATUS === OrderStatus.READY">
                            <ion-select [value]="orderElement.STATUS">
                                <ion-select-option *ngFor="let status of orderElementStatus" [value]="status">{{status}}</ion-select-option>
                            </ion-select>
                        </ion-col>
                    </ion-row>
                </ion-grid>

The output looks like as attached

Answer 1

You need to eliminate the padding at top and start for the ion-select. This rule will do that for you:

ion-select {
    --padding-top: 0;
    --padding-start: 0;
}

Final Result