Bootstrap input-append + Google Maps form - google-maps

Question

I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE

Answer 1

I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}​
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.

Answer 2

#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
​
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.