JavaFX FXML HBox左右对齐

Question

我正在尝试对齐HBox的子节点（它们是网格窗格），以便一个节点与HBox的左侧对齐，另一个节点与右侧对齐。我怎样才能做到这一点？

这就是我得到的：

这是我想要实现的目标：

这是我目前的代码：

<TextArea/>
<HBox spacing="10">
    <Button text="Attack"/>
    <Button text="Spells"/>
    <Button text="Inventory"/>
    <Button text="Run"/>
</HBox>
<HBox alignment="center_left" spacing="10">
    <GridPane hgap="10" vgap="5" >
        <Label text="Name: " GridPane.columnIndex="0" GridPane.rowIndex="0"/>
        <Text text="${controller.battle.player.name}" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
        <Label text="Health: " GridPane.columnIndex="0" GridPane.rowIndex="1"/>
        <Text text="${controller.battle.player.hubHealth}" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
        <Label text="Level: " GridPane.columnIndex="0" GridPane.rowIndex="2"/>
        <Text text="${controller.battle.player.hubLevel}" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
        <Label text="Experience: " GridPane.columnIndex="0" GridPane.rowIndex="3"/>
        <Text text="${controller.battle.player.hubExperience}" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
    </GridPane>
    <HBox alignment="center_right">
    <GridPane hgap="10" vgap="5" >
        <Label text="Name: " GridPane.columnIndex="0" GridPane.rowIndex="0"/>
        <Text text="${controller.battle.enemy.name}" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
        <Label text="Health: " GridPane.columnIndex="0" GridPane.rowIndex="1"/>
        <Text text="${controller.battle.enemy.hubHealth}" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
        <Label text="Level: " GridPane.columnIndex="0" GridPane.rowIndex="2"/>
        <Text text="${controller.battle.enemy.hubLevel}" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
        <Label text="Experience: " GridPane.columnIndex="0" GridPane.rowIndex="3"/>
        <Text text="${controller.battle.enemy.hubExperience}" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
    </GridPane>
    </HBox>
</HBox>