Jetpack Compose layout challenge

Solution for Jetpack Compose layout challenge
is Given Below:

I’m trying to layout the following in compose but I cannot seem to get the alignment / arrangements to work correctly. I have tried starting with Row() and also trying starting with Column but the results are the same – misaligned.

So I have the following properties:

 1. constantA = "774"
 2. operator = "+"
 3. constantB = "62"
 4. line = "-------"
 5. answer = "826"
 6. icon = "checkmark"

The alignment needs to be as follows:

     774
    + 52
   -----
     826 ✓ 

Any help or pointers will be appreciated!

In case you wanna use a regular Icon:

@Preview
@Composable
fun OperationPreview() {
    val constantA = "774"
    val operator = "+"
    val constantB = "62"
    val line = "-------"
    val answer = "826"

    Row(verticalAlignment = Alignment.Bottom) {
        Column(horizontalAlignment = Alignment.End) {
            Text(text = constantA)
            Text(text = "$operator $constantB")
            Text(text = line)
            Row() {
                Text(text = answer)
            }
        }
        Icon(
            modifier = Modifier
                .size(10.dp)
                .padding(bottom = 5.dp),
            imageVector = Icons.Default.Check,
            contentDescription = null
        )
    }

}

@Composable
fun TextAlignLayout() {
    val constantA = "774" + "    "
    val operator = "+" + " "
    val constantB = "62" + "    "
    val line = "-------" + "    "
    val answer = "826"
    val icon = "✓"

    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxSize(),
        horizontalAlignment = Alignment.End
    ) {
        Text(constantA)
        Text("$operator$constantB")
        Text(line)
        Text("$answer $icon")
    }
}