Styling with VStack and HStacks so text align - WidgetKit SwiftUI - swiftui

Question

I'm trying to get the last styling done on my Widget but I just can't seem to get the number "+1.75" and the Orange dot to align with the "Wheat" text. How do I properly align this row?
I've tried using Spacer() but it just doesn't seem to work?
struct CropPriceView: View {
#Environment(\.widgetFamily) var family: WidgetFamily
var body: some View {
if family == .systemSmall{
VStack{
HStack{
VStack{
HStack{
Circle()
.fill(Color(#colorLiteral(red: 0.9333333333, green: 0.6784313725, blue: 0.262745098, alpha: 1)))
.frame(width: 10, height: 10)
VStack(alignment: .leading){
Text("Wheat")
.foregroundColor(Color(#colorLiteral(red: 0.168627451, green: 0.1647058824, blue: 0.1647058824, alpha: 1)))
.font(Font.custom("TPFrank-Bold", size: 14))
.lineSpacing(0.18)
Text("MATIF")
.font(Font.custom("TPFrank-Regular", size: 12))
.foregroundColor(Color(#colorLiteral(red: 0.5921568627, green: 0.5921568627, blue: 0.5921568627, alpha: 1)))
.lineSpacing(0.15)
}
Spacer()
}
}
Spacer()
Text("+1.75")
.foregroundColor(Color(#colorLiteral(red: 0.4431372549, green: 0.7490196078, blue: 0.3882352941, alpha: 1)))
.font(Font.custom("TPFrank-Medium", size: 14))
.lineSpacing(0.35)
}
Spacer()
HStack{
Spacer()
Text("168.02")
.foregroundColor(Color(#colorLiteral(red: 0.168627451, green: 0.1647058824, blue: 0.1647058824, alpha: 1)))
.font(Font.custom("TPFrank-Bold", size: 22))
.lineSpacing(0.55)
}
}.padding(EdgeInsets(top: 15, leading: 15, bottom: 15, trailing: 15))
}
}
}

Answer 1

Hopefully this helps, let me know if it works for you. I believe you were looking for .firstTextBaseline to align with the first Text.
struct Example_WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
VStack {
HStack(alignment: .firstTextBaseline) {
Image(systemName: "circle.fill")
.resizable()
.frame(width: 10, height:10)
.foregroundColor(Color.orange)
VStack (alignment: .leading){
Text("Wheat")
.font(.subheadline)
.fontWeight(.bold)
.allowsTightening(true)
Text("MATIF")
.font(.footnote)
.fontWeight(.bold)
.foregroundColor(Color.secondary)
.allowsTightening(true)
}
Spacer()
Text("+1.75")
.font(.footnote)
.fontWeight(.bold)
.foregroundColor(Color.green)
.allowsTightening(true)
}
Spacer()
HStack {
Spacer()
Text("168.02")
.font(.title)
.fontWeight(.bold)
}
}
.padding(.all, 10)
}
}

Answer 2

Set HStack alignment: .top
var body: some View {
if family == .systemSmall{
VStack{
HStack(alignment: .top) { //<<--Here
VStack{
HStack(alignment: .top) { //<<--Here