Bootstrap popover inside another div

Question

I have a boostrap row with two columns. The first column has some input controls. I want when I click some control to display a popover to the right in the second column.
Ideally the arrow to be at the end of first column and title with content inside the second column. The width of popover must be the same with the second column.

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 1" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. ">
            <input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 2" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. ">
        </div>
    </div>
    <div class="col-md-6">
        I want popover to be displayed inside this. 
    </div>

</div>

<script type="text/javascript">
    $(function () {
        $(".myClass").popover({placement: 'right'});
    });
</script>

Answer 1

Just to make sure, that the popover is appended to the right column, so that it can be sized depending on that, I added id="right" to it and container : '#right' to the popover configuration.
All that was left to do, was to add the following CSS:

.popover {
    width: 100%;
    max-width: none;
}

See here: https://jsfiddle.net/b7oqsccr/