I have a div with three elements: input field, timer, reset button in desktop view all three elements are of the same height but when I view it on an iphone 12 mini specifically the timer and reset button shrink in height. When I tested its dimensions using chrome dev tools this issue didn't come up
<div style={{ display: "flex", flexDirection: 'row', justifyContent: 'space-between', height: '8vh', alignItems: 'center', }}><input type="text" autoCorrect="off" autoCapitalize="none" ref={inputRef} value={typedWord} onChange={handleInputChange} disabled={timer ? false : true} autoFocus={true} /><div className="timer"><span style={{ fontSize: 20, fontFamily: 'lexend', color: 'var(--text-color)', }}>{timer}s</span></div><div className="reset" onClick={() => { setRotated(!rotated); resetTest(); setTypedChars([]); setTest(false) }}><FiRefreshCcw size={25} color={'var(--text-color)'} className={rotated ? 'icon rotate' : 'icon'} /></div></div>input { background-color: var(--sub-alt-color); border: 1px solid var(--sub-color); color: var(--text-color); border-radius: 5px; padding-left: 20px; width: 65.5%; max-width: 65.5%; min-height: 8vh; height: 8vh; font-size: 18px; outline: none; transition: border-color 0.3s ease;}.timer { width: 14.5%; display: flex; user-select: none; height: 8vh; min-height: 8vh; flex-shrink: 0; align-items: center; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px;}.reset { width: 14.5%; display: flex; height: 8vh; align-items: center; min-height: 8vh; flex-shrink: 0; justify-content: center; background-color: var(--sub-alt-color); border-radius: 5px; cursor: pointer;}