I am trying to implement this layout
[![enter image description here](https://i.stack.imgur.com/MlHLt.png)](https://i.stack.imgur.com/MlHLt.png)

Here is my view code snippet
============================

```
<View style={[{
    flexDirection: 'row',
    backgroundColor: 'white', 
    borderRadius: 8
}]}>

    <Text style={{
        color: 'white',
        backgroundColor: 'red',
        paddingStart: 12,
        paddingEnd: 12,
        transform: [
            { rotate: '-90deg' },
        ]

    }}>{`Sample Text`}</Text>

    <View >

        <Text>Right Content will be here</Text>
    </View>
</View>

```

Output
======

[![enter image description here](https://i.stack.imgur.com/xHXQp.png)](https://i.stack.imgur.com/xHXQp.png)

The problem of my current implementation are

* The rotated view is not positioned at positioned
* The container view's height is not affected with the rotated view's width or height

How can I fix it in a way it could adapt the font size accessibility settings?