Why .width() and .height() modifiers apply wrong value?

Question

I want two independent rows to have the same width and scroll simultaneously. I have tried to achieve this in this way:

@Composable
fun TwoRows() {
    val scrollState = rememberScrollState()

    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.fillMaxWidth().horizontalScroll(scrollState)) {
            for (i in 0 until 100) {
                Box(Modifier.width(10.dp).height(10.dp).background(Color.Red))
                Spacer(Modifier.width(90.dp))
            }
        }
        Row(Modifier.fillMaxWidth().horizontalScroll(scrollState)) {
            for (i in 0 until 100) {
                Box(Modifier.width(100.dp).height(10.dp).background(Color.Green))
            }
        }
    }
}

The first row consists of 10 dp width red rectangles and 90 dp width spacers. The second row consists of only 100 dp width green rectangles. I'm expecting these rows to have the same width but the layout inspector shows they're not:

Because of this the elements do not match expecting positions:

How can I fix it?