change vertical alignment of particular person objects in SwiftUI HStack?

I’ve the next code.

struct ContentView: View {
    @State var textInput: String = "Testing"

    personal let inputCornerRadius: CGFloat = 24

    var physique: some View {
        HStack(alignment: .backside, spacing: 8) {
            TextField("Chat", textual content: $textInput, axis: .vertical)
                .lineLimit(1...9)
                .textFieldStyle(.plain)

            Button(motion: ship) {
                Picture(systemName: "paperplane.fill")
                    .foregroundStyle(.background)
                    .imageScale(.medium)
                    .padding(10)
                    .background(
                        Circle()
                            .fill(Coloration(.label))
                        )
            }
        }
        .padding(.vertical, 8)
        .padding(.main, 10)
        .padding(.trailing, 6)
        .background(
            RoundedRectangle(cornerRadius: inputCornerRadius, type: .steady)
                .fill(Coloration(.secondarySystemBackground))
        )
        .clipShape(RoundedRectangle(cornerRadius: inputCornerRadius, type: .steady))
        .padding(.horizontal, 10)
    }

    personal func ship() {}
}

The difficulty is that the textual content subject is aligned to the underside. I would like it to be centered. Right here is the difficult half tho, I would like the ship button to at all times be aligned to the underside (or middle if it is only a single line).

If I modify the HStack alignment to .middle, it really works precisely how I would like for single line textual content, however as soon as it will get to be a number of traces, the ship button is centered as a substitute of aligned to the underside.

So listed below are my necessities:

• For single lined textual content, each textual content enter and ship button are centered vertically.
• For multi lined textual content, the ship button is aligned to the underside of the grey background (plus padding).

Issues I’ve tried:

• Setting alignment to .middle (I defined why that would not work above)
• Wrapping the TextField in one other HStack that’s aligned middle (the guardian continues to be aligned backside). This did not have any impact.
• Added a VStack across the TextField, with Spacers on the high and backside. This had the impact of constructing your entire view peak stretch to match the guardian views peak (which I do not need).
• Added .alignmentGuide(.backside) { d in d[.bottom] } to the Button, and set the alignment to .middle. Nonetheless had no impact, and the button remained centered.

Ideally I might wish to keep away from doing textual content peak calculations and all of that. It seems like this ought to be a reasonably easy UI I am making an attempt to construct, so it does not appear reasonable to overcomplicate it.

How can I get the Button to at all times be aligned to the underside, whereas the TextField stays centered?