How to put text before and after a button in BootstrapCSS - css

Question

I using Bootstrap and trying to place some text at the same line with a button. I need some words to be shown just before the button and some other after.
This is what I have:
<div class="input-group">
Match
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND</li>
<li>OR</li>
</ul>
</div>
</div>
</div>
Everything
</div>
Although the above puts everything in the same row, it adds whitespaces before and after the strings and shows them as in the attachment:

Answer 1

Here's a way to achieve it with adding just one more set of div tags and moving the words outside of the input group. And a Bootply.
<div class="form-inline">
Match
<div class="input-group">
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND</li>
<li>OR</li>
</ul>
</div>
</div>
</div>
</div>
Everything
</div>
As suggested, adding this CSS will counteract the breaking at 768px of .form-inline.
.form-inline .input-group {
display: inline-table; vertical-align: middle;
}
.form-inline .input-group .input-group-btn {
width: auto;
}

Answer 2

You need to set some attributes for .input-group and .input-group-btn:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.input-group {
display: inline-table;
vertical-align: middle;
}
.input-group .input-group-btn {
width: auto;
}
<div class="input-group">
Match
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND
</li>
<li>OR
</li>
</ul>
</div>
</div>
</div>
Everything
</div>