Making the form line align to the text field border

I have this code:

struct ContentView: View {
  @State var email = ""
  @State var text = ""


var body: some View {
    Form {
      
      HStack{
        Text("E-MAIL: ")
          .font(.subheadline)
        TextField("Your e-mail...",
                  text: $email)
      }
      
      TextField("type text",
                text: $text,
                axis:.vertical)
      .padding()
      .overlay( RoundedRectangle(cornerRadius: 20).stroke(.gray) )
      .lineLimit(6)
      .padding(.top, 20)
      
    }
  
    .padding()
}

}

This code previews like this:

Look at the line below the email field. You see a padding on the left side but no padding on the right side. How do I add a padding to the right side, so this line is the same size as the round rectangle below and centered?

>Solution :

you could try this approach:

Form {
    VStack {  // <-- here
        HStack {
            Text("E-MAIL: ").font(.subheadline)
            TextField("Your e-mail...", text: $email)
        }
        Divider() // <-- here
        TextField("type text",text: $text, axis:.vertical)
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 20).stroke(.gray))
            .lineLimit(6)
            .padding(.top, 20)
    }
}