Jetpack Compose Row Item Positioning

Question

I've struggled with this layout, which seems like it should be trivial, but I guess since I'm a somewhat beginner with Compose that I can't quite get it right.

All I want to do is have these two pieces of text aligned to Start and the red number text aligned to End, without any overlapping if the two pieces of text get long (see images below). The SpaceBetween horizontalArrangement seems to make sense, to push them apart as far as possible, which is what I want.

While looking through other questions I just came across Modifier.weight() and that got me closer, except that the weight needs to change based upon what number is being displayed in red, which is kind of hacky if I had to do that.

My code for the layout is below, with corresponding images below each code sample. LOL I don't know why it's so hard for me to do.

Card(
        modifier = modifier,
        elevation = 10.dp
    ) {
        Box(
            modifier = modifier
                .background(
                    color = MaterialTheme.colors.surface,
                    shape = RoundedCornerShape(MaterialTheme.spacing.defaultRoundedCorner)
                )
                .padding(
                    top = MaterialTheme.spacing.scoatch,
                    end = MaterialTheme.spacing.small,
                    bottom = MaterialTheme.spacing.small,
                    start = MaterialTheme.spacing.small
                )
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier.weight(3f) // WEIGHT(3F) <------------------------
                ) {
                    Text(
                        text = firearm.name,
                        style = MaterialTheme.typography.h6
                    )

                    Text(
                        text = firearm.notes ?: "",
                        style = MaterialTheme.typography.subtitle1,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }

                Text(
                    text = "26,000", // "26,000" RED TEXT <-------------------------------------------
                    style = MaterialTheme.typography.h5,
                    color = LightError,
                    modifier = Modifier.weight(1f)
                )
            }
        }
    }

Card(
        modifier = modifier,
        elevation = 10.dp
    ) {
        Box(
            modifier = modifier
                .background(
                    color = MaterialTheme.colors.surface,
                    shape = RoundedCornerShape(MaterialTheme.spacing.defaultRoundedCorner)
                )
                .padding(
                    top = MaterialTheme.spacing.scoatch,
                    end = MaterialTheme.spacing.small,
                    bottom = MaterialTheme.spacing.small,
                    start = MaterialTheme.spacing.small
                )
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier.weight(3f) // WEIGHT(3F) <------------------------
                ) {
                    Text(
                        text = firearm.name,
                        style = MaterialTheme.typography.h6
                    )

                    Text(
                        text = firearm.notes ?: "",
                        style = MaterialTheme.typography.subtitle1,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }

                Text(
                    text = "0", // "0" RED TEXT <-------------------------------------------
                    style = MaterialTheme.typography.h5,
                    color = LightError,
                    modifier = Modifier.weight(1f)
                )
            }
        }
    }

Card(
        modifier = modifier,
        elevation = 10.dp
    ) {
        Box(
            modifier = modifier
                .background(
                    color = MaterialTheme.colors.surface,
                    shape = RoundedCornerShape(MaterialTheme.spacing.defaultRoundedCorner)
                )
                .padding(
                    top = MaterialTheme.spacing.scoatch,
                    end = MaterialTheme.spacing.small,
                    bottom = MaterialTheme.spacing.small,
                    start = MaterialTheme.spacing.small
                )
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Column(
                    modifier = Modifier.weight(20f) // WEIGHT(20F) <------------------------
                ) {
                    Text(
                        text = firearm.name,
                        style = MaterialTheme.typography.h6
                    )

                    Text(
                        text = firearm.notes ?: "",
                        style = MaterialTheme.typography.subtitle1,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }

                Text(
                    text = "0", // "0" RED TEXT <-------------------------------------------
                    style = MaterialTheme.typography.h5,
                    color = LightError,
                    modifier = Modifier.weight(1f)
                )
            }
        }
    }

Answer 1

Apply the weight modifier only to the Column

    Row(
       //....
    ) {
        Column(
            modifier = Modifier.weight(1f) //  <--------------------
        ) {
            //...
        }

        Text(
            //modifier = Modifier.weight(1f) //remove this <------
        )
    }