I'm trying to implement a two-column text layout in React Native with specific requirements:

1. Two Text components in a flex row container with a fixed 20px gap between them
2. Short text (either on left or right) should never wrap (stay on a single line)
3. Long text (either on left or right) should grow horizontally until it meets the 20px gap before wrapping
4. If both texts are long, they should both wrap at the middle separated by the gap

My problem is that even short text is wrapping when it shouldn't. For example, when I have "short text" on the left and a long paragraph on the right, the "short text" wraps into two lines.

<View style={{ flexDirection: 'row', width: "100%" }}>
  <Text style={{ flexShrink: 1, flexGrow: 1 }}>short text</Text>
  <View style={{ width: 20, flexShrink: 0 }} />
  <Text style={{ flexShrink: 1, flexGrow: 1, textAlign: "right" }}>very long text content that goes on and on...</Text>
</View>

The odd thing is that "short text" has plenty of space to fit on one line, but React Native seems to be forcing it to wrap anyway. I've tried various combinations of flex properties (flexGrow, flexShrink, flexBasis) but can't find the right combination to achieve the desired behavior.

Is there a way to achieve this layout without manually measuring text widths? What's the right approach to handle this situation in React Native?

Picture of the behaviour I am trying to achieve