Bootstrap - Input group doesn't work - css

Question

I am trying to align inputs and buttons using the .input-group class as shown here.
It works well and shows the desired output when I place a button before the text box.
But, when I place the button next to the text box, the button doesn't stay close to the text box.
I am using Bootstrap 3 in my ASP.NET project, created using Visual Studio 2015 Community Edition.
Here is the code:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Answer 1

I had the exact same problem and I looked at cale_b's fiddle and it appeared correct for me. So I scratched my head trying to figure out what was different in my environment. I noticed that in my site.css (my custom css for my app), I had the following:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Once I removed (or commented out) that CSS, then it worked. But now I need to find a different approach to default the max-widths on my inputs. Oh well, at least it solved my problem, hope it solved yours.