Styling Input and button - height issue

css, html

Solution

<span class="inputWithButton">
  <input type="text"><button>Submit</button>
</span>

 input, button{outline: none;}

.inputWithButton{
    display:inline-block;
    overflow:hidden;
    border:1px solid gray;
    border-radius: 3px;
}
.inputWithButton > *{
    vertical-align:top;
    border:0;
    margin:0;
    padding: 3px 10px;
}
.inputWithButton > input[type=text]{
    width:150px;
}
.inputWithButton > button{
    border-left:1px solid gray;
    background:#eee;
    cursor:pointer;
    width:70px;
}
.inputWithButton > button::-moz-focus-inner {
  border: 0;
}

DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit

(Just remove border from the `span` and add border to both input and button) That easy.

Problem

I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field. I'm using this CSS currently: ``` button { position: relative; left: -4px; box-sizing: border-box; padding: 0 10px; margin: 0; font-size: 17px; border: 1px solid gray; border-radius: 0 3px 3px 0; } ``` http://jsfiddle.net/GRwqL/ The main problem is the usage of the `left` property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers. The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field. So I was looking for some help to write a better code cross-browser and cleaner. Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.

Original source