How to make only one column in a GridLayout expand on resize ?

[foobarbaz]

Dear Community,

I know there are plenty of questions regarding the Layout management, but I didn't find anything that would fit my needs :)
I want to achieve the following behaviour (left pic on creation, right pic on resize):

Note that

1. That bright red rectangle must expand, other ones - must not.
2. Columns are not necessarily of equal width, it doesn't matter. But they should be aligned (as in the pic)

I tried several ways with no success. So here is a simple snippet to demonstrate my wish:

GridLayout {
    id: grid

    columns: 4

    // Row 0
    Label {
        text: "foo"
    }

    Label {
        text:               "bar bar bar"
        Layout.columnSpan:  2
        Layout.fillWidth:   true
    }

    // The one who is supposed to take extra space on resizing
    Item {
        Layout.fillWidth: true
    }

    // Row 3
    Rectangle {
        implicitHeight:     10
        Layout.columnSpan:  4
        Layout.fillWidth:   true
        color:              "red"
    }

    // Row 2
    Label {
        text: "baz"
    }

    Button {
        text:               "qux"
        Layout.fillWidth:   true
    }

    Button {
        text:               "waldo"
        Layout.fillWidth:   true
    }

    // The one who is supposed to take extra space on resizing
    Item {
        Layout.fillWidth: true
    }

    // ... etc.
}

Thank you in advance !