fix position in RN StyleSheet

I am rendering an item in a list like this:

  return (<View style={styles.item}><View style={styles.nameAddressContainer}><Text style={styles.customisedName}>{place.customisedName}</Text><Text style={styles.address}>{place.placeName}</Text></View><View style={styles.deleteButtonContainer}><Button          rounded          style={styles.deleteButton}          onPress={() => onDeletePlace(place.id)}><Icon name="trash-o" size={moderateScale(15)} color="black" /></Button></View></View>  );export const styles = StyleSheet.create({  item: {    backgroundColor: '#d7fce4',    borderRadius: moderateScale(20),    marginVertical: moderateScale(8),    marginHorizontal: 16,    height: moderateScale(60),    justifyContent: 'space-between',    flexDirection: 'row',  },  customisedName: {    paddingTop: moderateScale(10),  },  deleteButton: {    backgroundColor: 'white',    width: moderateScale(35),    height: moderateScale(35),    justifyContent: 'center',  },  deleteButtonContainer: {    paddingTop: 7,    paddingRight: 7,    position: 'relative',  },  nameAddressContainer: {    flexDirection: 'column',    paddingLeft: moderateScale(10),  },  address: {    fontSize: moderateScale(9),  },});

When the placeName text is too long, it pushes the button towards the right. The button moves out of the main green view. How can I stop this from happening? Is it possible to fix the button's position while the placeName text hides or moves to the next line?

position: fix is invalid for React Native stylesheets. I have also tried using zIndex but that didn't work either.