How to incorporate TextField with blank underlined space in SwiftUI view

I'm trying to do a type of fill in the blank question. I have a question that pops up that I want to look like

"This is a question and the answer is __________ that you will type in"

The issue is I have a text field at the bottom of the page for the user to input their answer and then press enter. However, I wanted the blank space in the question to be dynamically filled with the user input in the text field. I know this can be done with a simple binding to the text field but I'm not sure how to make that work with the question's underlined blank space.

This is what I have so far

struct dialogueCaptionBoxWithQuestion: View {

var questionPart1: String
var questionPart2: String
var correctChosen: Bool
var answer: String

@Binding var userInput: String
@Binding var currentQuestionNumber: Int

var body: some View{
    
    HStack {
        if !correctChosen {
            Text(questionPart1)
                .font(Font.custom("Chalkboard SE", size: 15)) +
            Text(userInput)
                .font(Font.custom("Chalkboard SE", size: 15))
                .foregroundColor(.black)
                .underline(color: .black.opacity(1.0)) +
            Text(questionPart2)
                .font(Font.custom("Chalkboard SE", size: 15))
        }else {
            Text(questionPart1)
                .font(Font.custom("Chalkboard SE", size: 15)) +
            
            Text("  " + answer + "  ")
                .font(Font.custom("Chalkboard SE", size: 15))
                .foregroundColor(.black)
                .underline(color: .black.opacity(1.0)) +
            Text(questionPart2)
                .font(Font.custom("Chalkboard SE", size: 15))
        }
    }.frame()
        .padding([.top, .bottom], 10)
        .padding([.leading, .trailing], 20)
        .foregroundColor(.black)
        .background(.white)
        .cornerRadius(10)
        .shadow(radius: 5)
    
}

}

If you want to do it by concatenating Text fields then underline is perhaps your best bet. You're actually using this already, so you just need to add padding to increase the length of the incomplete answer:

    Text(userInput.padding(
        toLength: max(userInput.count, 15),
        withPad: " ",
        startingAt: 0
    ))
    .font(Font.custom("Chalkboard SE", size: 15))
    .foregroundColor(.black)
    .underline(color: .black.opacity(1.0)) +

However, this is not a great solution because you're using a proportional font, so the width of the Text field is always changing as the user enters their answer.

Perhaps it would be better to consider a different design that is not affected by these issues. For example, you could use a VStack with the incomplete answer sandwiched between questionPart1 and questionPart2. That way, you can style it any way you like and also apply a fixed width.

Btw, there is no need to pass the userInput as a Binding because it's a read-only view. It only needs to be a Binding if you want to be able to write changes to it. Also, it would be simpler to apply the font to the container instead of to each individual Text field. Your use of .frame() is deprecated too, but maybe that's because you cut down your original code to provide the example.