Below is the code that I currently have:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    property bool expanded: false
    property int filterWidth: 400

    id: root
    width: filterWidth
    height: columnFilter.implicitHeight

    ColumnLayout {
        id: columnFilter
        width: parent.width

        RowLayout {
            id: row
            height: implicitHeight
            Layout.margins: 10
            width: parent.width - Layout.leftMargin - Layout.rightMargin
            spacing: 10

            Text {
                id: text1
                text: qsTr("Hair color")
                font.pixelSize: 16
            }

            Item {
                Layout.fillWidth: true
            }

            Image {
                id: expandIcon
                width: 20
                height: 20
                sourceSize: Qt.size(width, height)
                source: "./Up-black.svg"
                fillMode: Image.PreserveAspectFit
                rotation: 180
            }
        }

        Column {
            id: filterValues
            spacing: 10
            height: 0
            clip: true
            Layout.leftMargin: 12
            visible: height > 0

            onHeightChanged:  {
                console.log("bottom col " + (y + height))
            }

            Text {
                id: blond
                text: qsTr("Blond")
                font.pixelSize: 16
                clip: true
            }

            Text {
                id: brown
                Layout.margins: 12
                text: qsTr("Brown")
                font.pixelSize: 16
                clip: true
            }
        }

        Rectangle {
            id: line1
            width: row.width
            height: 2
            color: "black"
        }

        MouseArea {
            id: filterTitleMouseArea
            anchors.fill: row
            enabled: true
            onClicked: expanded = !expanded
        }
    }

    states: [
        State {
            name: "Expanded"
            when: root.expanded

            PropertyChanges {
                target: expandIcon
                rotation: 0
            }
            PropertyChanges {
                target: filterValues
                height: implicitHeight
            }
        }
    ]

    transitions: [
        Transition {
            id: transition1
            ParallelAnimation {
                PropertyAnimation {
                    target: expandIcon
                    property: "rotation"
                    duration: 200
                }
                PropertyAnimation {
                    target: filterValues
                    property: "height"
                    duration: 500
                }
            }
            to: "*"
            from: "*"
        }
    ]

}

What I would like is something that looks like this:

Rectangle {
           id: line1
           width: row.width
           height: 2
           color: "black"
           top: filterValues.y + filterValues.height
       }

Which kinda works, but doesn't take into account the margins/padding of the filterValues column, and seems like a hack honestly. Is there a way to do that natively with the QML framework?
For reference, I'm using Qt 5.15.13.