How to create a qml component for currency?

NTMS

Hi,

I am new to qml and try to use Column and Row layout. But it seems I am having difficult to combine.
I dont want to use canvas. So; how can I design below component?

I can use columnlayouts for Buy and 0.0000 but I am having difficulty to combine like below picture.

J.Hilk

@NTMS
don't expect such a detailed example every time.

import QtQuick 2.9

Rectangle {
    id: root
    
    radius: width/10
    
    property alias topText: textAtTop.text
    
    Rectangle {
        id: topItem
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.verticalCenter
        
        color:"orange"
        
        Text{
            id:textAtTop
            color: "white"
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter
            
            text: qsTr("$")
        }
    }
    
    Item {
        id: bottemItem
        anchors.left:parent.left
        anchors.right: parent.right
        anchors.top: topItem.bottom
        anchors.bottom: parent.bottom
        
        Item{
            id:bottemLeft
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: (parent.width/2)-1
            Text{
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.verticalCenter
                
                color:"orange"
                text: "Buy"
                
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
            
            Text{
                anchors.top: parent.verticalCenter
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                
                color:"black"
                text: "0.0000"
                
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }
        
        Rectangle{
            id:seperator
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: height/15
            anchors.bottomMargin: height/15
            
            width: 2
            
            color:"black"
        }
        
        Item {
            id: bottemRight
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: (parent.width/2)-1
            
            Text{
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.verticalCenter
                
                color:"orange"
                text: "Sell"
                
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
            
            Text{
                anchors.top: parent.verticalCenter
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                
                color:"black"
                text: "0.0000"
                
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
            }
        }
    }
}

NTMS

@J-Hilk thank you. It is more than enough for me to study with your code. Kind Regards