Make sure drop text is always positioned correctly

components/home.js

@@ -32,8 +32,10 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
       onPress={ onPress }
       style={ styles.homeElement }
     >
+      <View style={styles.homeIconAndText}>
         {children[0]}
         {children[1]}
+      </View>
 
       <View style={{paddingLeft: 15}}>
         {children[2]}
@@ -108,11 +110,9 @@ export default class Home extends Component {
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View>
               <DripHomeIcon name="drop" size={100} color={periodColor} />
-              </View>
 
-              <IconText wrapperStyles={{top: 45, ...styles.wrapperIcon}}>
+              <IconText wrapperStyles={{top: '50%', ...styles.wrapperIcon}}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 

styles/index.js

@@ -125,7 +125,6 @@ export default StyleSheet.create({
     marginBottom: defaultBottomMargin,
   },
   homeElement: {
-    alignItems: 'center',
     marginBottom: 40,
     flexDirection: 'row',
   },
@@ -133,6 +132,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  homeIconAndText: {
+    justifyContent: 'center'
+  },
   wrapperIcon: {
     width: 80,
     position: 'absolute'