I am wanting to build the following layout in Compose:

I have written the following code for this:

@Composable
fun MainScreenContent(){
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier
            .wrapContentWidth(Alignment.CenterHorizontally)
            .wrapContentHeight(Alignment.CenterVertically)
    ) {
        Row() {
            Column(Modifier.weight(0.3F)) {
                Greeting("Android")
                Spacer(Modifier.padding(16.dp))
                Greeting("User")
            }
            Surface(modifier = Modifier.weight(0.4F),
                color = MaterialTheme.colors.primaryVariant,
            ){
                Spacer(Modifier.padding(16.dp))
            }

            Column(Modifier.weight(0.3F)) {
                Greeting("Android")
                Spacer(Modifier.padding(16.dp))
                Greeting("User")
            }
        }
    }

}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!",
        Modifier
            .padding(16.dp), fontSize = 30.sp)
}

But with this, I am getting the following output:

How can I achieve the objective?