title: Constraints/auto-layout with two textboxes side by side
body: <p>I'm trying to place two textboxes side by side to eachother and keep their relative width/position when I rotate the device or change devices. I'm trying to understand constrainst and auto/layout but it seems slightly confusing. I can get it to work with one textbox but not two..</p>
  
  <p>Here's what I currently have.
  <a href="https://i.stack.imgur.com/9Xupj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Xupj.png" alt="enter image description here"></a>
  This is the device in portrait mode. The two textboxes are constrained 20 to the left and right with equal gap of 26 in between of them leaving their width to be 174.</p>
  
  <p><a href="https://i.stack.imgur.com/5P7rz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5P7rz.png" alt="enter image description here"></a></p>
  
  <p>Then when I rotate the device to landscape mode, I get this..
  <a href="https://i.stack.imgur.com/B3cLJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B3cLJ.png" alt="enter image description here"></a></p>
  
  <p>The textbox on the right is now much larger than the textbox on the left and the constraints on the right one seems to have changed </p>
  
  <p><a href="https://i.stack.imgur.com/pbEyb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pbEyb.png" alt="enter image description here"></a></p>
  
  <p>While the constraints on the left textbox now appear to be empty..
  <a href="https://i.stack.imgur.com/ArThD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ArThD.png" alt="enter image description here"></a></p>
  
  <p>What I would like is to have the two textboxes keep the gap in between them relative so when I rotate the device either their width scales to match the gap or even if their width doesn't scale then increase the gap between them to match the width..
  Something like this
  <a href="https://i.stack.imgur.com/usisq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/usisq.png" alt="enter image description here"></a></p>
  
  <p>Constraints are too confusing :cry:</p>
  
  <p>Edit:
  Attempt with horizontal stackview
  <a href="https://i.stack.imgur.com/RvIA6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RvIA6.png" alt="enter image description here"></a></p>
  
  <p>But the textboxes are really small.</p>