I have a Bootstrap button along with an input box that looks and works perfect in every browser I have tested the page on except Mozilla Firefox. This is what it's supposed to look like and it does on Safari, IE, and Chrome:

[![enter image description here](https://i.stack.imgur.com/FwYLr.png)](https://i.stack.imgur.com/FwYLr.png)

And this is what it looks like on Firefox:

[![enter image description here](https://i.stack.imgur.com/gussl.png)](https://i.stack.imgur.com/gussl.png)

The version I tested it on is 42 and I am not sure if it's the same in any other version. What gives? Is this a common problem with the Bootstrap grid layout in Firefox?

Here's a fiddle reproducing the scenario as closely as practically possible: 

```css
.lookup-field {
  background-color: #fff9e5;
  border-right: 1px solid #e5e0ce;
  border-bottom: 1px solid #e5e0ce;
  border-left: 1px solid #b2aea0;
  border-top: 1px solid #b2aea0;
  box-shadow: none;
  padding-right: 3em;
}
.lookup-field-single {
  height: 3em !important;
}
.kb-icon {
  position: absolute;
  z-index: 1000;
  top: 24%;
  right: calc(3.4em + 2%);
  opacity: 0.4;
  cursor: pointer;
  transition: .25s ease-in-out;
}
.kb-icon.vkb-active {
  opacity: 1;
  cursor: pointer;
}
.kb-icon:hover {
  opacity: 1;
}
i.kb-icon {
  text-decoration: none !important;
}
.sign-up-prefooter,
.lookup-submit {
  width: 100%;
  background-color: #4c3d00 !important;
  border-color: #4c3d00 !important;
  color: #ffffff !important;
}
.lookup-submit {
  height: 3em;
}
```

```html
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
  <div class="input-group col-md-4 col-md-offset-4">
    <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg lookup-field lookup-field-single" onMouseOver="$(this).focus();" required>
    <i class="fa fa-keyboard-o fa-2x kb-icon" onclick="toggler('virtualkeypad', this);"></i>
    <span class="input-group-btn">
   <button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="lookup_word();">Lookup</button>
  </span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
```