How to align items in RowLayout

Question

I want to align Rectangles in a RowLayout left to right. In below code example two Rectangles share additional space instead stack one after another. I used Layout.alignment: Qt.AlignLeft in RowLayout level and Rectangle level, but non of those two ways didn't change the view at all.

Item {
    RowLayout {
        anchors.fill: parent
        spacing: 2
        

        Rectangle {
            width: 100
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft

            Text {
                text: "Hello world"
            }
        }

        Rectangle {
            width: 100
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft

            Text {
                text: "Hello world"
            }
        }
    }
}

In following images black border indicates the RowLayout and red border is the Rectangles.

Actual

Expected

Answer 1

The documentation states regarding the Layout.alignment:

This property allows you to specify the alignment of an item within the cell(s) it occupies.

You can simply add a filler item at the end like such:

RowLayout {
    anchors.fill: parent
    spacing: 2


    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        color: 'red'

        Text {
            text: "Hello world"
        }
    }

    Rectangle {
        width: 100
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignLeft
        color: 'green'

        Text {
            text: "Hello world"
        }
    }

    Item {
        Layout.fillWidth: true
    }
}

But alternatively use that:

Row {
    anchors.fill: parent
    spacing: 2


    Rectangle {
        width: 100
        anchors {
            top: parent.top
            bottom: parent.bottom
        }

        color: 'red'

        Text {
            text: "Hello world"
        }
    }

    Rectangle {
        width: 100
        anchors {
            top: parent.top
            bottom: parent.bottom
        }
        color: 'green'

        Text {
            text: "Hello world"
        }
    }
}