title: How align columns for multiple items on a VStack on SwiftUI?
body: <p>In the sample below, if I have a <code>VStack</code> followed for a <code>HStack</code>, how can I make the width of the <code>HStack</code> follow the same as a <strong>grid</strong> ?</p>
  <pre><code>struct VStackAlignmentView: View {
      let data = [&quot;a&quot;, &quot;b&quot;, &quot;cdefghl alalala&quot;, &quot;i&quot;, &quot;j&quot;]
      var body: some View {
          VStack(spacing: 0) {
              ForEach (data, id:\.self) { item in
                  HStack(alignment: .top) {
                      Text(&quot;Column 1&quot;)
                      VStack(alignment: .trailing) {
                          Text(&quot;Column \(item)&quot;)
                          Text(&quot;Value 2&quot;)
                      }
                      .frame(minWidth: 120)
                      Text(&quot;Column 3&quot;)
                      Spacer()
                  }
              }
          }
      }
  }
  </code></pre>
  <p>This is the result I got:
  <a href="https://i.stack.imgur.com/UoeAk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UoeAk.png" alt="Result of the code above" /></a>
  <em>The text on the 3rd row is aligned to the right, but the other rows it adds a space to that</em></p>
  <p>I have tried a hack to for the <code>VStack(alignment: .trailing)</code> by adding an empty <code>Text</code> with the frame width and it works, but I don't think that is an elegant way.</p>
  <p>I also tried to use <code>alignmentGuide</code> but it push the views to other way.</p>
  <p>Anyone with the same problem?</p>