What's the best way to have two Text elements of different sizes line up on the same baseline?-CodePudding

I have two text views of different font sizes, and I want them to line up on the same baseline. I.e:


HStack {
    Text("100").font(.largeTitle)
    Text("kg")
}

And here I want 100 and kg to line up as if they are text on the same line, even though the font sizes are different.

I have tried setting alignment: .bottom on the HStack, but obviously this aligns the bottoms of the text views, not the font baseline.

Is there an elegant way to achieve this?

CodePudding user response：

I assume you wanted this one

HStack(alignment: .firstTextBaseline) {   // << here !!
    Text("100").font(.largeTitle)
    Text("kg")
}