diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 30c9b9ad4d9d..ce5f7e3a58e8 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import CONST from '../CONST';
 import Text from './Text';
@@ -293,7 +294,14 @@ function MagicCodeInput(props) {
                         key={index}
                         style={[styles.w15]}
                     >
-                        <View style={[styles.textInputContainer, focusedIndex === index ? styles.borderColorFocus : {}, props.hasError || props.errorText ? styles.borderColorDanger : {}]}>
+                        <View
+                            style={[
+                                styles.textInputContainer,
+                                StyleUtils.getHeightOfMagicCodeInput(),
+                                focusedIndex === index ? styles.borderColorFocus : {},
+                                props.hasError || props.errorText ? styles.borderColorDanger : {},
+                            ]}
+                        >
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value, props.maxLength)[index] || ''}</Text>
                         </View>
                         <View style={[StyleSheet.absoluteFillObject, styles.w100, isMobileSafari ? styles.bgTransparent : styles.opacity0]}>
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 99ea6f6a7857..22d638aa9204 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -71,6 +71,15 @@ function getAvatarSize(size) {
     return avatarSizes[size];
 }
 
+/**
+ * Return the height of magic code input container
+ *
+ * @returns {Object}
+ */
+function getHeightOfMagicCodeInput() {
+    return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth};
+}
+
 /**
  * Return the style from an empty avatar size constant
  *
@@ -1203,4 +1212,5 @@ export {
     getGoogleListViewStyle,
     getMentionStyle,
     getMentionTextColor,
+    getHeightOfMagicCodeInput,
 };