How to set different heights on columns with flex-direction: 'row' - css

Question

I'm trying to set container with two columns with different heights.
I have my container which has flex-direction: 'row' and flexWrap: 'wrap'.
Now I want to display there elements (only two can fit into container width) with different heights. I know that this can't be done with just flexbox, because rows has to be the same height when wrapping. So my question is: can this be done in React Native when Flexbox is default display type?
Code:
Container:
import React from 'react';
import {StyleSheet, View} from 'react-native';
import Reminder from './../components/reminders/Reminder';
const reminders = require('../../public/reminders.json');
const RemindersPage = () => {
return (
<View style={styles.reminders}>
{reminders.map((reminder) => {
return <Reminder key={reminder.id} reminder={reminder} />;
})}
</View>
);
};
const styles = StyleSheet.create({
reminders: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
});
export default RemindersPage;
Element:
import React from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
const Reminder = ({reminder}) => {
let source = require('./../../../public/forest.jpg');
return (
<View style={styles.reminder}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={source} />
</View>
<View style={styles.reminders}>
{reminder.alerts.map((alert) => {
return (
<View style={styles.alert} key={alert.time}>
<Text style={styles.time}>{alert.time}</Text>
</View>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
reminder: {
minWidth: '48%',
height: 'auto',
backgroundColor: '#333',
color: 'white',
padding: 5,
marginVertical: 4,
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'white',
alignSelf: 'flex-start',
},
imageContainer: {
alignItems: 'center',
borderStyle: 'solid',
borderBottomWidth: 1,
borderColor: 'white',
paddingBottom: 8,
},
image: {
width: '100%',
height: 150,
resizeMode: 'cover',
},
alerts: {
flexDirection: 'column',
marginTop: 5,
},
alert: {
flexDirection: 'row',
},
time: {
fontWeight: 'bold',
color: 'white',
textShadowColor: 'black',
textShadowOffset: {width: 0, height: 0},
textShadowRadius: 5,
},
});
export default Reminder;
My goal is that the element with red frame goes up as the arrow is pointing.
It should looks like this:
I don't want to set flex-direction to 'column' beacause I want this page to be scrollable.