QML RowLayout Alignment looks wrong

Question

I am using QT Designer to create a dynamic view for a certain component in my application. However, the 'apple' and 'Food:' text items within the RowLayout aren't aligned properly. I am trying to make it so that the baseline of those texts are aligned. I'm not sure how I can do that.

Note: I could set a custom margin just for the apple, but I would like to avoid that as I want my layout to be as dynamic as possible for different screen sizes/resolutions

import QtQuick 2.0
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

Item {
    id: item1
    width: 500
    height: 300
    x: 177
    y: 258

    Rectangle {
        id: container
        anchors.centerIn: parent
        anchors.fill: parent
        color: "black"
        anchors.left: parent.left
        anchors.right: parent.right

        ColumnLayout{
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.leftMargin: 16
            anchors.topMargin: 16
            spacing: 0
            Text {
                id: category
                x: 194
                y: 227
                width: 92
                color: "#FFFFFF"
                text: qsTr("Category")
                font.pixelSize: 18
                font.family: "Roboto Medium"
            }
            RowLayout{
                spacing: 2
                Text {
                    id: categoryTitle
                    width: 365
                    height: 10
                    color: "#FFFFFF"
                    text: qsTr("Food: ")
                    font.pixelSize: 60
                    verticalAlignment: Text.AlignBottom
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    font.family: "Roboto"
                }

                Text {
                    id: categoryItem
                    height: 62
                    width: 365
                    color: "#FFFFFF"
                    text: qsTr("apples")
                    font.pixelSize: 30
                    verticalAlignment: Text.AlignBottom
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    font.family: "Roboto"
                }
            }
        }
    }
}

What it looks like right now:

Answer 1

Instead of:

Layout.alignment: Qt.AlignLeft | Qt.AlignBottom

use

Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline