Displaying two or more texts horizontally based on their size Jetpack compose Android

Question

I need to display multiple texts line by line, similar to a paragraph. My desired implementation resembles the following:

My current implementation is shown below:

Here is the code,

ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
            val (title, viewAll) = createRefs()
            Text(text =
            "TestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestData ",
                modifier = Modifier
                    .background(Color.White)
                    .constrainAs(title) {
                        top.linkTo(
                            parent.top
                        )
                        start.linkTo(parent.start)
                        end.linkTo(viewAll.start)
                        width = Dimension.preferredWrapContent
                    }
            )
            Text(
                text = "Learn more",
                style = TextStyle(
                    color = MaterialTheme.colorScheme.primary,
                    textDecoration = TextDecoration.Underline
                ),
                modifier = Modifier.constrainAs(viewAll) {
                    start.linkTo(
                        title.end,
                        2.dp
                    )
                    end.linkTo(parent.end)
                    bottom.linkTo(title.bottom)
                }
            )
        }

Answer 1

You can display paragraph with Clickable Text like this.

@Composable
fun ParagraphWithClickableText() {
    val uriHandler = LocalUriHandler.current

    val paragraph = buildAnnotatedString {
        withStyle(style = SpanStyle()) {
            append("TestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestDataTestData ")
        }

        val learnMoreStart = length
        withStyle(style = SpanStyle(textDecoration = TextDecoration.Underline, color = Color.Blue)) {
            append("Learn more")
        }
        val learnMoreEnd = length

        addStringAnnotation(
            tag = "LearnMore",
            annotation = "LearnMore",
            start = learnMoreStart,
            end = learnMoreEnd
        )
    }
    ClickableText(
        text = paragraph,
        onClick = { offset ->
            val annotations = paragraph.getStringAnnotations(tag = "LearnMore", start = offset, end = offset)
            annotations.firstOrNull()?.let {
                val uri = "https://your_learn_more_url_here"
                uriHandler.openUri(uri)
            }
        }
    )
}