Vertical Divider between Two Columns in Jetpack Compose

Question

I can't seem to make this vertical divider work in this case:

Row(
                modifier = modifier
                    .fillMaxWidth()
                    .background(Color.Blue),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Column (
                    modifier = modifier
                        .fillMaxWidth()
                        .weight(1F),

                ) {
                    Text(
                        modifier = modifier
                            .padding(5.dp),
                        style = MaterialTheme.typography.bodySmall,
                        text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
                        overflow = TextOverflow.Ellipsis,
                        textAlign = TextAlign.Left
                    )
                }
                Box(  //Vertical divider
                    modifier
                        .fillMaxHeight()
                        .width(5.dp)
                        .background(color = Color.Yellow)
                )
                Column (
                    modifier = modifier
                        .fillMaxWidth()
                        .weight(1F)
                ) {
                    Text(
                        modifier = modifier
                            .padding(5.dp),
                        style = MaterialTheme.typography.bodySmall,
                        text = "Testing one two three",
                        overflow = TextOverflow.Ellipsis,
                        textAlign = TextAlign.Left
                    )
                }
            }

I have tried the following:

Divider(
                    color = Color.Black,
                    modifier = Modifier
                        .height(IntrinsicSize.Max)
                )

But it still doesn't fill the height of the parent row when the text either side increases its size:

Answer 1

Use .height(IntrinsicSize.Min) on the Row and define Divider like this,

    Divider(
        color = Color.Yellow,
        modifier = Modifier
            .fillMaxHeight()
            .width(5.dp)
    )

or Box like this,

    Box(
        modifier = Modifier
            .background(Color.Yellow)
            .fillMaxHeight()
            .width(5.dp)
    )

A Divider is a just Box with parameters to use it easily for Vertical divider use cases as it is a common UI component.

Complete Code

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Blue)
        .height(IntrinsicSize.Min),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .weight(1F),
    ) {
        Text(
            modifier = Modifier
                .padding(5.dp),
            style = MaterialTheme.typography.bodySmall,
            text = "Testing one two three doo doo doo dood odoodo do dood od o doodood o dood oodo do od odoodo doo od odo od odoodo",
            overflow = TextOverflow.Ellipsis,
            textAlign = TextAlign.Left
        )
    }
    Divider(
        color = Color.Yellow,
        modifier = Modifier
            .fillMaxHeight()
            .width(5.dp)
    )
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .weight(1F)
    ) {
        Text(
            modifier = Modifier
                .padding(5.dp),
            style = MaterialTheme.typography.bodySmall,
            text = "Testing one two three",
            overflow = TextOverflow.Ellipsis,
            textAlign = TextAlign.Left
        )
    }
}

Screenshot

Android Docs for Reference