title: How do I align my qml component properly?
body: <p>I'm trying to write simple QML application, which will consist of many repeated elements, organized in rows. The outcome will be similar to the one presented below:
  <a href="https://i.stack.imgur.com/DnQ0T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DnQ0T.png" alt="enter image description here"></a></p>
  
  <p>Currently, I have a repetitive piece of code which achieves this goal:</p>
  
  <pre><code>import QtQuick 2.12
  import QtQuick.Window 2.12
  import QtQuick.Controls 2.5
  import QtQuick.Controls.Material 2.3
  import QtQuick.Layouts 1.12
  
  ApplicationWindow {
      Material.theme: Material.Dark
      visible: true
      width: 480
      height: 640
      title: qsTr("Hello world!")
      id: root
  
      GridLayout {
          anchors.horizontalCenter: parent.horizontalCenter
          columns: 3
  
          Text {
              color: "white"
              text: "aaa"
              font.family: "Ubuntu"
              font.pixelSize: 20
          }
          SpinBox {
              from: 0
              to: 1000
              stepSize: 1
              editable: true
          }
          Rectangle {
              width: 40
              height: 20
              color: "#F48FB1"
              Text {
                  font.family: "Ubuntu"
                  font.pixelSize: 16
                  text: "ml"
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.horizontalCenter: parent.horizontalCenter
              }
          }
  
          Text {
              color: "white"
              text: "bbb"
              font.family: "Ubuntu"
              font.pixelSize: 20
          }
          SpinBox {
              from: 0
              to: 100
              stepSize: 1
              editable: true
          }
          Rectangle {
              width: 40
              height: 20
              color: "#F48FB1"
              Text {
                  font.family: "Ubuntu"
                  font.pixelSize: 16
                  text: "%"
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.horizontalCenter: parent.horizontalCenter
              }
          }
          Text {
              color: "white"
              text: "ccc"
              font.family: "Ubuntu"
              font.pixelSize: 20
          }
          SpinBox {
              from: 0
              to: 100
              stepSize: 1
              editable: true
          }
          Rectangle {
              width: 40
              height: 20
              color: "#F48FB1"
              Text {
                  font.family: "Ubuntu"
                  font.pixelSize: 16
                  text: "%"
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.horizontalCenter: parent.horizontalCenter
              }
          }
      }
  }
  </code></pre>
  
  <p>However, every row has exactly the same structure, so I tried to extract the component from the code:</p>
  
  <pre><code>Item {
  id: ingredient
  property alias ingredientText: qualifier.text
  property alias ingredientMaxValue: amount.to
  property alias ingredientUnit: unit.text
  
  RowLayout {
      Text {
          id: qualifier
          color: "white"
          text: "asdf"
          font.family: "Ubuntu"
          font.pixelSize: 20
      }
      SpinBox {
          id: amount
          from: 0
          to: 1000
          stepSize: 1
          editable: true
      }
      Rectangle {
          width: 40
          height: 20
          color: "#F48FB1"
          Text {
              id: unit
              font.family: "Ubuntu"
              font.pixelSize: 16
              text: "unit"
              anchors.verticalCenter: parent.verticalCenter
              anchors.horizontalCenter: parent.horizontalCenter
              }
          }
      }
  }
  </code></pre>
  
  <p>Unfortunately, when I try to use my component in the main window, it is misaligned and gets out of visible part of it (I can see it again after maximizing the window):</p>
  
  <pre><code>ApplicationWindow {
  Material.theme: Material.Dark
  visible: true
  width: 480
  height: 640
  title: qsTr("Hello world!")
  id: root
  
  GridLayout { // I know now it will not work properly for sure,
      //  but i tried using other layouts and alignment methods
      //  and it didn't help me at all
      anchors.horizontalCenter: parent.horizontalCenter
      columns: 3
      Ingredient {
          ingredientMaxValue: 100; ingredientText: "qwerty"; ingredientUnit: "kg"
          }
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/8yGrH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8yGrH.png" alt="enter image description here"></a></p>
  
  <p>The question is: how can I achieve items alignment like in the first picture, using "Ingredient" components?</p>