Aligning item of VBox and HBox to different position from other items - javafx

Question

I'm designing a dashboard in JavaFX FXML. Here is a screenshot of the dashboard:
Here is FXML file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<VBox xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="com.farhad.controllers.DashboardMenuController"
spacing="50.0"
id="dashboard-menu"
stylesheets="#../style/dashboard.css">
<HBox alignment="CENTER" spacing="5.0">
<ImageView>
<Image url="#../icons/user.png" />
</ImageView>
<VBox spacing="5.0" alignment="CENTER_LEFT">
<Label id="user-full-name" text="User full name"/>
<Label id="user-login-name" text="User login name"/>
</VBox>
</HBox>
<Separator />
<!-- About User -->
<VBox spacing="20.0">
<HBox>
<ImageView>
<Image url="#../icons/overview.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Overview"/>
<Separator orientation="VERTICAL"/>
</HBox>
<HBox>
<ImageView>
<Image url="#../icons/accounts.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Accounts" />
<Separator orientation="VERTICAL"/>
</HBox>
<HBox>
<ImageView>
<Image url="#../icons/transaction.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Transactions"/>
<Separator orientation="VERTICAL"/>
</HBox>
<HBox>
<ImageView>
<Image url="#../icons/products.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Your Products"/>
<Separator orientation="VERTICAL"/>
</HBox>
</VBox>
<Separator />
<!-- Settings -->
<VBox spacing="20.0">
<HBox>
<ImageView>
<Image url="#../icons/add-account.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Add New Account" />
<Separator orientation="VERTICAL"/>
</HBox>
<HBox>
<ImageView>
<Image url="#../icons/merchant.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Be Merchant"/>
<Separator orientation="VERTICAL"/>
</HBox>
<HBox>
<ImageView>
<Image url="#../icons/settings.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="User Settings" />
<Separator orientation="VERTICAL" />
</HBox>
</VBox>
<!-- Logout -->
<VBox alignment="BOTTOM_CENTER">
<HBox >
<ImageView>
<Image url="#../icons/logout.png" />
</ImageView>
<Label styleClass="dashboard-menu-item-label" text="Logout" />
<Separator orientation="VERTICAL" />
</HBox>
</VBox>
</VBox>
My problem is in the Logout label and a little white vertical separator in each menu item. I want to place the Logout label at the bottom of Parent VBOX and a little white vertical separator to the left of HBOX as other apps.
How can I modify the code so my dashboard looks like this:
Suppose that this dashboard has a Logout label at the bottom of the VBox