CSS Issue with Chrome and Phone

There’s two ways to fix this:
1) by adjusting your current custom code
2) By doing some absolute positioning, which is a bit more challenging but might be more solid

#1 Your Custom Code
Currently, you have this custom code for the currency box:

background-color: #F00;
    border-top: none;
    border-bottom: none;
    color: #FFF;
    margin: 0;
    padding: 22px !important;
    height: 0px !important;
    line-height: 0px !important;
    font-size: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-weight: bold;

I would adjust the padding to adjust the height. But it seems that no matter what the padding is, it seems just one pixel off all the time.

#2 ABSOLUTE POSITIONING
Here’s what I’d say, the best way to force equal height on those is to use some absolute positioning, so it takes a bit more code than normal. But first we still have to adjust your custom CSS. Basically remove the height: 0px !important, then apply this:

form[id*=give-form] .give-donation-amount {
    display: relative;
}

form[id*="give-form"] .give-donation-amount .give-currency-symbol.give-currency-position-before {
    height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
}

form[id*="give-form"] .give-donation-amount .give-currency-symbol.give-currency-position-before {
    margin: 0 0 0 50px;
}

Let me know how that goes.