QML Text alignment in RowLayout with ColLayout

Question

I want to align different Texts in RowLayout like bellow image

And here is my code

        Rectangle {
            id:root
            anchors.fill: parent
            color: "black"
            RowLayout
            {
                ColumnLayout
                {
                    id:col
                    Text {
                        text: "t1"
                        font.pixelSize:root.height/4
                        color: "white"
                    }
                    Text {
                        id:txt
                        text: "t2"
                        font.pixelSize:root.height/4
                        color: "white"
                    }
                }
                Text {
                    id:txt3
                    text: "t3"
                    font.pixelSize:root.height
                    color: "white"
                }
            }

        }

But i fail to adjust t2 baseline with t3 (i want t2 and t3 start from same line from bottom) but result of my code is:

Answer 1

If you don't use a ColumnLayout for the smaller texts, you can align the smaller and larger text on their baselines:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

Window {
    id: window
    width: 300
    height: 300
    color: "black"
    visible: true

    RowLayout {
        id: root

        Text {
            id: txt
            text: "t2"
            font.pixelSize: window.height / 4
            color: "white"
            anchors.baseline: txt3.baseline

            Text {
                text: "t1"
                font.pixelSize: window.height / 4
                color: "white"
                anchors.bottom: parent.top
            }
        }
        Text {
            id: txt3
            text: "t3"
            font.pixelSize: window.height / 1.5
            color: "white"
        }
    }
}

Answer 2

Rectangle
    {
        id:root
        anchors.fill: parent
        color: "black"
        RowLayout
        {
            anchors.fill: parent
            ColumnLayout
            {
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignBottom
                id:col
                Text {
                    text: "t1"
                    font.pixelSize:root.height/4
                    color: "white"
                }
                Text {
                    id:txt
                    text: "t2"
                    font.pixelSize:root.height/4
                    color: "white"
                }
            }
            Text {
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignBottom
                id:txt3
                text: "t3"
                font.pixelSize:root.height
                color: "white"
            }
        }
    }

Answer 3

You can also use Baseline with Layouts:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0

Window {
    id: window
    width: 300
    height: 300
    color: "black"
    visible: true

    RowLayout {
        id: root

        Text {
            id: txt
            text: "t2"
            font.pixelSize: window.height / 4
            color: "white"
            Layout.alignment: Qt.AlignBaseline //<=======

            Text {
                text: "t1"
                font.pixelSize: window.height / 4
                color: "white"
                anchors.bottom: parent.top
            }
        }
        Text {
            id: txt3
            text: "t3"
            Layout.alignment: Qt.AlignBaseline //<=======
            font.pixelSize: window.height / 1.5
            color: "white"
        }
    }
}