Align bootstrap dropdown in input-group to left (underneath the start of the input) - css

Question

I have a input group (text input and button with dropdown). I am having trouble getting my dropdown to align with the text box.
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-btn">
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried <div class="dropdown-menu dropdown-menu-left"> with no avail.
Here is a fiddle
What do I need to add to this to align my dropdown menu to the left underneath the start of the input (as if it was a typeahead)?
EDIT: within the dropdown menu is an angular directive, that's likely a relative tool

Answer 1

Here is the Quick Fix
Working Demo Here
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="testing">
<input type="text" class="form-control" />
</div>
<div class="input-group-btn">
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">dropdown</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.testing {
position: relative;
}
JS:
$(document).ready(function() {
dropmenuWidgetPosition();
function dropmenuWidgetPosition() {
$('#dropdownMenuButton').dropdown('toggle');
$(window).on('show.bs.dropdown', function(e) {
var dropdownMenu = $(e.target).find('.dropdown-menu');
var dropMenuDetach = dropdownMenu.detach();
// detach it and append it to the target
$(e.target).parents('.input-group').eq(0).find('.testing').append(dropMenuDetach);
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this
// could be
// improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': 0
});
});
// and when you hide it, reattach the drop down, and hide it
// normally
$(window).on('hide.bs.dropdown', function(e) {
var dropdownMenu = $(e.target).parents().find('.dropdown-menu');
var dropMenuDetach = dropdownMenu.detach();
$(e.target).append(dropMenuDetach);
dropdownMenu.hide();
});
}
});