QML Rectangle Object coming in wrong place - qml

Question

I am just trying to create 4 rectangles with 3 next to each other and 4th one is below the 3rd rectangle and my qml looks like below
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Rectangle")
Item{
anchors.centerIn: parent
Rectangle {
id: firstRect
width:50
height:50
color: "#ff0000"
}
Rectangle {
id: secondRect
width:firstRect.width
height: firstRect.height
color: "blue"
//opacity: 0.5
anchors.left: firstRect.right
}
Rectangle {
id: thirdRect
width:firstRect.width
height: firstRect.height
color: "green"
//opacity: 0.5
anchors.left: secondRect.right
}
Rectangle {
id: fourthrect
width:firstRect.width
height: firstRect.height
color: "green"
//opacity: 0.5
anchors.top: thirdRect.bottom
}
}
}
But i am getting the 4th rectangle below the first rectangle like below even though my anchor is thirdRect.Bottom what am i doing wrong

Answer 1

Nearly there, you're close. Just need to anchor it horizontally under the third rectangle.
Rectangle {
id: fourthrect
width:firstRect.width
height: firstRect.height
color: "green"
anchors.top: thirdRect.bottom
anchors.left: thirdRect.left // <-- this
}
Note that, assuming both the third and fourth rectangles have the same width, it's also possible to use anchors.right: thirdRect.right or anchors.horizontalCenter: thirdRect.horizontalCenter.
Setting anchors.top: thirdRect.bottom will only anchor the item vertically, but not horizontally.