I am trying to have my input range all in one line and connected but after I added the span part the addon and the last textbox float to the right making them not joined. It works fine on mobile phones but on a normal monitor it has them separated. How can I move the addon and the last textbox next to the first textbox? (The Year and Price Textboxes are examples of my issue)

Here is what it looks like:

enter image description here

Here is what the Year code looks like:

<div class="form-group">
	<label for="tbxBegYear" class="col-sm-2 control-label">Year</label>
	<div class="col-sm-10">
		<div class="input-group">
			<asp:TextBox ID="tbxBegYear" CssClass="form-control" runat="server" MaxLength="4" placeholder="Begin"/>
			<span class="input-group-addon">-</span>
			<asp:TextBox ID="tbxEndYear" CssClass="form-control" runat="server" MaxLength="4" placeholder="End"/>
		</div>
	</div>
</div>

The following code works, so I'm guessing you have some CSS somewhere that we'd need to see to answer the question:

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<div class="input-group">
    <input type="text" class="form-control" placeholder="Start"/>
    <span class="input-group-addon">-</span>
    <input type="text" class="form-control" placeholder="End"/>
</div>
<!-- end snippet -->