How to align items in RowLayout - qt

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"
}
}
}

Answer 2

You could change the spacing value to a negative like below :
RowLayout {
anchors.fill: parent
spacing: -parent.width*0.6
Rectangle {
width: 100
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft
border.width:1
border.color:"red"
Text {
text: "Hello world"
}
}
Rectangle {
width: 100
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft
border.width:1
border.color:"red"
Text {
text: "Hello world"
}
}
}