Correctly align sibling component

Hello Conor, first of all: Thank you for this library 😄

I'd like to ask for a light on something: I want to essentialy put small views in between the syntax highlightings, like this:

My idea is to make sibling components, but when I do it, the syntax highlighter always occupy 100% of the width (or the height, if I change the wrapper to `flexDirection: row`):

Essentially this is producing:
```js
{Code1}

???

{Code2}
```

Do you know if there's a way to accomplish it? I saw there's a bunch of scrollviews inside every Highlighter component and I'm assuming that's the problem. I'm trying to play with the styles but got no solution so far.

Here's the simplest example possible:
```js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NativeSyntaxHighlighter from 'react-native-syntax-highlighter';

const Code1 = `
if (`;

const Code2 = `) {
callSomething();
return true;
}
`;

export default class App extends React.Component {
render() {
return (


{Code1}

???

{Code2}


);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
codeWrapper: {
backgroundColor: '#bbb',
flexWrap: 'wrap',
width: '100%',
},
answerGap: {
backgroundColor: 'purple',
padding: 3,
},
textAnswer: {
color: 'white',
},
});

```

Thank you and have a nice week

Start with the minimal App example and inspect NativeSyntaxHighlighter, especially the nested ScrollViews mentioned in the report, alongside the codeWrapper styles. Reproduce the sibling layout and determine why the highlighter takes the full width or height; done means the two highlighted code blocks and the answer view align as intended.

Written by the indexing model from the issue text.