Q:

How to align Labels with different Text sizes to Botttom?

I have two different Labels, one large one which displays a changing text and a smaller one which displays a % sign, and has to be smaller.
I have these two in a GridPane and aligned the left text to BOTTOM_RIGHT and aligned the right text BOTTOM_LEFT, so there is no gap in between:

How can I get the two texts to align so they look like the following image?

In hindsight, a TextFlow would have been a better solution, but I'm much too far into my project to change this now.

A:

This depends on how you've built your Scene. If you're using FXML/Scene Builder, you'd set the valignment property for your GridPane row to BASELINE.
Here's a complete FXML that replicates your screenshots (without styling):
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1">
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="-Infinity" valignment="BASELINE" vgrow="SOMETIMES"/>
    </rowConstraints>
    <children>
        <Label style="-fx-font-size: 5.0em;" text="44"/>
        <Label style="-fx-font-size: 3.0em;" text="\%" GridPane.columnIndex="1"/>
    </children>
</GridPane>

If you're designing the Scene in Java, the end goal is the same: set the valignment of the row to BASELINE:
import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;

public class TextAlignSample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        // Simple Interface
        GridPane root = new GridPane();

        RowConstraints constraints = new RowConstraints(
                Region.USE_PREF_SIZE,
                Region.USE_COMPUTED_SIZE,
                Region.USE_COMPUTED_SIZE);
        constraints.setValignment(VPos.BASELINE);

        root.getRowConstraints().add(constraints);

        // Add our Labels
        root.add(new Label("44") {{
            setStyle("-fx-font-size: 5.0em");
        }}, 0, 0);
        root.add(new Label("%") {{
            setStyle("-fx-font-size: 3.0em");
        }}, 1, 0);

        // Show the stage
        primaryStage.setScene(new Scene(root));
        primaryStage.setTitle("TextAlignSample Sample");
        primaryStage.show();

    }
}

The Result:

Sorry for the odd color; something is wrong with my screen cap software

