Horizontal Stacks

If you want to put things side-by-side, you use Horizontal Stacks. A Horizontal Stack arranges things horizontally, and you can use “Spacers” to take up the empty space when you want, for example, two different visual elements pushed all the way to the sides.

This 101 example shows a Horizontal Stack with three elements: Text, Spacer, and Symbol. Here, you can see, the Spacer is taking up all of the space that is allowed and left over after the Text and Symbol take up their space. In this example, the Horizontal Stack was given a Frame modifier to set a specific overall width of 280.