Columns of grouped checked boxes overlapping with one another

So, I'm trying to create a filter box for an ecommerce-based application that I'm working on and I want to make multiple button groups of check boxes within columns. I tried to separate the different columns but they overlap with one another. For example, the priceColumn overlaps with the conditionColumn. I am looking for a way to separate each button group by line. Is there anyway around this or any other solution that you would suggest? I'm new to QML by the way.

Here's my code for example:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

import "." as NeroshopComponents

Pane {
    id: filterBox
    clip: true // The area in which the contents of the filterBox will be bounded to (set width and height) // If clip is false then the contents will go beyond/outside of the filterBox's bounds
    width: 250; height: 540
    background: Rectangle { 
        color: (NeroshopComponents.Style.darkTheme) ? "#2e2e2e"/*"#121212"*/ : "#a0a0a0"
        radius: 3
    }    
    // conditionGroup
    ButtonGroup {
        id: conditionButtonGroup
        buttons: conditionColumn.children
        exclusive: false // more than one button in the group can be checked at any given time
        checkState: conditionParentBox.checkState
        onClicked: {
            console.log("Selected condition:", button.text)
            if(checkState == Qt.Unchecked) {
                console.log("checkState: NO button is checked")
            }
            if(checkState == Qt.Checked) {
                console.log("checkState: All buttons are checked")
            }            
            if(checkState == Qt.PartiallyChecked) {
                console.log("checkState: One or more buttons are checked")
            }
        }
    }
    // priceGroup
    ButtonGroup {
        id: priceButtonGroup
        buttons: priceColumn.children
        exclusive: false // more than one button in the group can be checked at any given time
        checkState: priceParentBox.checkState
        onClicked: {
            console.log("Selected price range:", button.text)
            if(checkState == Qt.Unchecked) {
                console.log("checkState: NO button is checked")
            }
            if(checkState == Qt.Checked) {
                console.log("checkState: All buttons are checked")
            }            
            if(checkState == Qt.PartiallyChecked) {
                console.log("checkState: One or more buttons are checked")
            }
        }
    }        
    ////////////////////
    Rectangle {
        id: filterOptions
        //anchors.fill: parent
            x: -horizontalScrollBar.position * width
            y: -verticalScrollBar.position * height        
            color: "transparent"
            width: parent.width
            height: parent.height
        Column {//ColumnLayout {
            id: conditionColumn
            
            Text { 
                text: qsTr("Condition"); 
                font.bold: true
                color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
            }
            CheckBox {
                id: conditionParentBox
                //text: qsTr("Any")//qsTr("Parent")
                checkState: conditionButtonGroup.checkState
                
                Text {
                    text: qsTr("Any")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                
            }        
            CheckBox { 
                //checked: false
                //text: qsTr("New")
                leftPadding: indicator.width
                ButtonGroup.group: conditionButtonGroup
                Text {
                    text: qsTr("New")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                      
            }
            CheckBox { 
                //text: qsTr("Used")
                leftPadding: indicator.width
                ButtonGroup.group: conditionButtonGroup
                Text {
                    text: qsTr("Used")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                      
            }
            CheckBox { 
                //text: qsTr("Refurbished/Renewed")
                leftPadding: indicator.width
                ButtonGroup.group: conditionButtonGroup
                Text {
                    text: qsTr("Refurbished/Renewed")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                      
            }
        }
        ////////////////////////
        Column {//ColumnLayout {
            id: priceColumn
            Text { 
                text: qsTr("Price")
                font.bold: true
                color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
            }
            CheckBox { 
                id: priceParentBox
                checkState: priceButtonGroup.checkState
                Text {
                    text: qsTr("Any")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                
            }
            CheckBox { 
                leftPadding: indicator.width
                ButtonGroup.group: priceButtonGroup       
                Text {
                    text: qsTr("$0.00-$1.00")
                    color: (NeroshopComponents.Style.darkTheme) ? "#ffffff" : "#000000"
                    anchors.left: parent.right
                    anchors.leftMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: (parent.height - this.contentHeight) / 2
                }                       
            }
        }        
        } // Rectangle: filterOptions
        ScrollBar {
            id: verticalScrollBar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Vertical
            size: (filterBox.height - 20) / filterOptions.height//filterBox.background.height / conditionColumn.height // 20 is the bottomMargin I guess?
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            policy: ScrollBar.AlwaysOn
        }

        ScrollBar {
            id: horizontalScrollBar
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
            size: filterBox.background.width / filterOptions.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            policy: ScrollBar.AsNeeded
        }
        // todo: sort by category, price, ratings, brand, color, etc.
}