Firefox, IE and Chrome different whitespace handling

Question

I'm curious why I get different results on Chrome and Firefox with this simple code:

1. Breaks on Chrome
2. Works on both Firefox, IE and Chrome

The only difference is in HTML layout:

<div class="container">
  <div class="form-wrapper">
    <input class="email" type="text">
    <button class="send pull-right">Send</button>
  </div>
</div>

versus this:

<div class="container">
  <div class="form-wrapper">
    <input class="email" type="text"><button class="send pull-right">Send</button>
  </div>
</div>

Any recommended fix without ugly hacks and HTML changes?

Answer 1

<input> isn't block elements by default. You must use float:left for them:

.form-wrapper {overflow:hidden;}
input.email, button.send{float:left}

Answer 2

Method 1:

/* CSS used here will be applied after bootstrap.css */
.form-wrapper {
  background-color: #000;
  padding: 10px;
  font-size: 0; /*set font-size to zero*/
}
input.email {
  background-color: #fff;
  border: none;
  height: 50px;
  width: 70%;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px; /*reset font-size*/
}

button.send {
  background-color: grey;
  border: none;
  height: 50px;
  width: 30%;
  font-size: 16px; /*reset font-size*/
}

working demo

Method 2:

Use float for inputs and clear the float using overflow:hidden to parent div.

demo