Aligning the elements using bootstrap css - html

Question

I have created bootstrap menu items and kept FLIP option beside that.
FIDDLE
Here issue is that FLIP should be just beside the box, but it is appearing downside?
HTML:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Politics</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li role="presentation" class="divider"></li>
<li id="four">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Celebrity</li>
<li></li>
</ul>
<span class="flip">
<span class="dropDownFlip">
FLIP
</span>
</span>
</div>
</div>

Answer 1

Your input is having a width of 100% being applied to it. It is being applied from the bootstrap.min.css file. By adding the following to your css it fixes your issue:
.input-group .form-control {
width: auto;
}
Here is your jsFiddle updated.
Update: Since this is a change to an existing class and could possibly affect elements elsewhere on your page/site, you could create a new class for this particular instance. Something like this would work:
.input-group .floatLeft {
float: left !important;
width: auto;
}
and just add the class floatLeft to your input.

Answer 2

Try to add following styles in you stylesheets
.magic-container .input-group input {
float: left;
margin-right: 2%;
width: 70%;
}
.flip {
float: left;
}