Align the TextField in the form

Question

Hello I created a form with 4 rows, each row contains a Text and 2 Textfields, as you can see from the picture they are not aligned vertically I can't find the way to align all of them and fix the size of the textfield, some of them are to long some of them to short.

       Section("Time Selection"){
                    HStack{
                        Text("OFF")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                            
                        TimeInsertView(localTime: $localChockOFF, localTimeDate: $localChockOFFDate, utcTime: $utcChockOFF, utcTimeDate: $utcChockOFFDate, selectedDate: $flightDate, TextBoxDescription: "Chock OFF")
                    }
                    HStack{
                        Text("Take OFF")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        TimeInsertView(localTime: $localChockIN, localTimeDate: $localChockINDate, utcTime: $utcChockIN, utcTimeDate: $utcChockINDate, selectedDate: $flightDate, TextBoxDescription: "Chock IN")
                            
                            .onChange(of: utcChockINDate) {
                                totalBlock = dm.timeDifference(endDate: utcChockINDate, startDate: utcChockOFFDate)
                            }
                    }
                    HStack{
                        Text("Landing")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        
                        TimeInsertView(localTime: $localTakeOFF, localTimeDate: $localTakeOFFDate, utcTime: $utcTakeOFF, utcTimeDate: $utcTakeOFFDate, selectedDate: $flightDate, TextBoxDescription: "Take Off")
                    }
                    HStack{
                        Text("IN")
                            .foregroundStyle(.blue)
                            .font(.footnote)
                        TimeInsertView(localTime: $localLanding, localTimeDate: $localLandingDate, utcTime: $utcLanding, utcTimeDate: $utcLandingDate, selectedDate: $flightDate, TextBoxDescription: "Landing")
                            .onChange(of: utcLandingDate) {
                                totalFlightTime = dm.timeDifference(endDate: utcLandingDate, startDate: utcTakeOFFDate)
                            }
                    }
                    
                    HStack{
                        Text("Block Hours")
                        Spacer()
                        Text(totalBlock)
                    }
                    HStack{
                        Text("Flight Time")
                        Spacer()
                        Text(totalFlightTime)
                    }
                    
                }

Answer 1

I would use a Grid. The very job of a "grid" is to align things!

Assuming TimeInsertView is a HStack that distributes two TextFields equally...

Grid(alignment: .leading) {
    GridRow {
        Text("OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
        TimeInsertView(...)
    }
    // add a Divider here if you like
    Divider()
    GridRow {
        Text("Take OFF")
            .foregroundStyle(.blue)
            .font(.footnote)
        TimeInsertView(...)
    }
    // and the rest of the grid rows...
}
HStack{
    Text("Block Hours")
    Spacer()
    Text(totalBlock)
}
// and the rest of the Section here...

This does not rely on a hardcoded value for the leftmost column. Grid finds the widest Text on the left column, and adjusts the right column's width accordingly.