How to line up bottom text for child view in VStack

Question

I have the following code which produces the following output.

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Text("data")
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Text("data 2")
                        }
                    )
            }
        }
    }

How would I get the text data to line up with the text data 2 even though the view (text) above it is a lot bigger, the text "11 / 11 /11 /111/1 111" , and causing the bottom view to be pushed further down? How would I stop that from happening?

I should also mention that I don't want "11 / 11 /11 /111/1 111" to be truncated.

EDIT: It's ok if that long text has a smaller font size compared to the text below it. I've tried minimumScaleFactor too and the bottom text view is still pushed relative to the top view with long text.

Here's what I'd like to accomplish.

Answer 1

I would simply put Spacer() s in between your Text() s in the VStack() s.

struct ContentView: View {
    var body: some View {
        
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.green)
                    .overlay(
                        VStack {
                            
                            Text("11 / 11 /11 /111/1 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
                
                Rectangle()
                    .fill(Color.red)
                    .overlay(
                        VStack {
                            Text("111 / 111")
                               .font(.system(size: 100.0))
                            Spacer() // add Spacer() here
                            Text("data 2")
                                .padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
                        }
                    )
            }
        }
    }
}

This code leaves you with this: