How do I align the tops of my Texts and images in SwiftUI

Question

How do I align the top of my Text for "Coach name (including the gold star)" with the top of my multiple users icon? Trying to find the easiest most simplest way. I have two VStacks embedded in an Hstack, but I have 3 items in my right Vstack which is pushing the right side up more than the left side. I want the top of the left side to align with the top of the right side

HStack{
    VStack (alignment: .leading, spacing: 5){
        Spacer()
        HStack{
            Text("Coach Name")
                .fontWeight(.black)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            HStack{
                Image (systemName: "star.fill")

                Text( "4.9")
            }.foregroundColor(Color (red: 0.942, green: 0.505, blue: 0.103, opacity: 1))
            Spacer()
        }
        HStack{
            Text("Sport")
                .fontWeight(.semibold)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))


        }


    }//closes coach name vstack in overall Hstack
    Spacer()
    VStack (alignment: .trailing , spacing: 5){
        Spacer()
        Image(systemName: "person.2")
            .resizable()
            .frame(width: 38, height: 25, alignment: .center)
            .font(Font.title.weight(.regular))
            .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
        Text ("Starting at")
            .font(.caption)
             .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            .fontWeight(.light)
        HStack (spacing: 0){
             Text ("$100")
                .fontWeight(.bold)
            Text (" / Session")
        }  .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))


    }
}

Answer 1

Here is how I would do this (removed couple unneeded spacers and added explicit vertical alignment for top container):

Note: I also recommend to put it into separate view, so if it is needed to layout it as a whole (eg. say put to bottom) it would be simpler to manipulate it (eg. put into other container and add spacer above it)

HStack(alignment: .top){
    VStack (alignment: .leading, spacing: 5){
        HStack(alignment: .top){
            Text("Coach Name")
                .fontWeight(.black)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            HStack{
                Image (systemName: "star.fill")

                Text( "4.9")
            }.foregroundColor(Color (red: 0.942, green: 0.505, blue: 0.103, opacity: 1))
            Spacer()
        }
        HStack{
            Text("Sport")
                .fontWeight(.semibold)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))

        }

    }//closes coach name vstack in overall Hstack
    Spacer()
    VStack (alignment: .trailing , spacing: 5){
        Image(systemName: "person.2")
            .resizable()
            .frame(width: 38, height: 25, alignment: .center)
            .font(Font.title.weight(.regular))
            .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
        Text ("Starting at")
            .font(.caption)
             .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            .fontWeight(.light)
        HStack (spacing: 0){
             Text ("$100")
                .fontWeight(.bold)
            Text (" / Session")
        }  .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
    }
}