I have a `Row` containing a free `Text` element and two `TextButton`s. I want the `Text` be aligned ...

# compose

[Lukasz Kalnik]

I have a Row containing a free Text element and two `TextButton`s. I want the Text be aligned by baseline with the `TextButton`s:

Row(modifier = Modifier.alignByBaseline()) {
            Text(
                text = "Geräte",
                style = MaterialTheme.typography.h6
            )
            TextButton(
                onClick = { /*TODO*/ },
            ) {
                Text(
                    text = "Alle an",
                    style = MaterialTheme.typography.h6,
                )
            }
            TextButton(onClick = { /*TODO*/ }) {
                Text(
                    text = "Alle aus",
                    style = MaterialTheme.typography.h6,
                )
            }
        }

[Stylianos Gakis]

Try adding Modifier.alignByBaseline() to all Row children and see how it looks like

[Lukasz Kalnik]

Yay, it works! Thank you 🙏

[Lukasz Kalnik]

Actually the Row doesn't need this modifier at all

[Stylianos Gakis]

Yeah, I said row children, it is a modifier defined under the RowScope scope, I don’t think you can even put this in the row itself unless it’s wrapped around another row.

[Lukasz Kalnik]

Yes, I understood you 👍 I put it in the Row at first, but I realized it was not necessary there. Thanks for your super quick and helpful tip!