title: JavaFX FXML HBox align left and right
body: <p>I'm trying to align the child nodes of a HBox (which are gridpanes) so that one node is aligned to the left of the HBox and the other to the right. How can i achieve this?</p>
  
  <p>This is what I'm getting: 
  <a href="https://i.stack.imgur.com/4Qdbc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Qdbc.png" alt="What I&#39;m getting"></a></p>
  
  <p>This is what I want to achieve: 
  <a href="https://i.stack.imgur.com/ikbmi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ikbmi.png" alt="What I want to achieve"></a></p>
  
  <p>This is the code I currently have:</p>
  
  <pre><code>&lt;TextArea/&gt;
  &lt;HBox spacing="10"&gt;
      &lt;Button text="Attack"/&gt;
      &lt;Button text="Spells"/&gt;
      &lt;Button text="Inventory"/&gt;
      &lt;Button text="Run"/&gt;
  &lt;/HBox&gt;
  &lt;HBox alignment="center_left" spacing="10"&gt;
      &lt;GridPane hgap="10" vgap="5" &gt;
          &lt;Label text="Name: " GridPane.columnIndex="0" GridPane.rowIndex="0"/&gt;
          &lt;Text text="${controller.battle.player.name}" GridPane.columnIndex="1" GridPane.rowIndex="0"/&gt;
          &lt;Label text="Health: " GridPane.columnIndex="0" GridPane.rowIndex="1"/&gt;
          &lt;Text text="${controller.battle.player.hubHealth}" GridPane.columnIndex="1" GridPane.rowIndex="1"/&gt;
          &lt;Label text="Level: " GridPane.columnIndex="0" GridPane.rowIndex="2"/&gt;
          &lt;Text text="${controller.battle.player.hubLevel}" GridPane.columnIndex="1" GridPane.rowIndex="2"/&gt;
          &lt;Label text="Experience: " GridPane.columnIndex="0" GridPane.rowIndex="3"/&gt;
          &lt;Text text="${controller.battle.player.hubExperience}" GridPane.columnIndex="1" GridPane.rowIndex="3"/&gt;
      &lt;/GridPane&gt;
      &lt;HBox alignment="center_right"&gt;
      &lt;GridPane hgap="10" vgap="5" &gt;
          &lt;Label text="Name: " GridPane.columnIndex="0" GridPane.rowIndex="0"/&gt;
          &lt;Text text="${controller.battle.enemy.name}" GridPane.columnIndex="1" GridPane.rowIndex="0"/&gt;
          &lt;Label text="Health: " GridPane.columnIndex="0" GridPane.rowIndex="1"/&gt;
          &lt;Text text="${controller.battle.enemy.hubHealth}" GridPane.columnIndex="1" GridPane.rowIndex="1"/&gt;
          &lt;Label text="Level: " GridPane.columnIndex="0" GridPane.rowIndex="2"/&gt;
          &lt;Text text="${controller.battle.enemy.hubLevel}" GridPane.columnIndex="1" GridPane.rowIndex="2"/&gt;
          &lt;Label text="Experience: " GridPane.columnIndex="0" GridPane.rowIndex="3"/&gt;
          &lt;Text text="${controller.battle.enemy.hubExperience}" GridPane.columnIndex="1" GridPane.rowIndex="3"/&gt;
      &lt;/GridPane&gt;
      &lt;/HBox&gt;
  &lt;/HBox&gt;
  </code></pre>