Bootstrap: css: html: Position bootstrap panel to the top right corner of the page

Question

I have an html page with some labels and form controls and a bootstrap 3 panel. I would like to place the panel in the top right corner of the page. How do I do that?

.cshtml:

<div>
<form id="MainForm" method="post" asp-controller="Controller" asp-action="Action">

    <div asp-validation-summary="All" class="text-danger"></div>        
    @if (@Model.Item1 != null && @Model.Item1.Length > 0)
    {
        <div class="row">                
            <div class="form-group  pull-left">
                <label class="control-label">Item 1</label>
                <div>
                    <label class="switch">
                        <input class="form-control" asp-for="Item2" onchange="$('#newItem').toggle(); $('#existingItem').toggle()" />
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        </div>

        <fieldset id="existingItem">
            <legend>Process using your existing item</legend>
            <div class="form-group">
                <label class="col-md-2 control-label">Existing item</label>
                <div class="col-md-10">                        
                    <label class="text-muted">@Model.Item2.Substring(Model.Item2.Length - 4)</label>
                </div>
            </div>
            <br />
            <input asp-for="Model.Item3" minRange="@MinItem3" maxRange="@maxRange" onkeyup="format_num_different(id)" />
        </fieldset>

        <div id="newItem" hidden="hidden">
            @await Html.PartialAsync("_Item3Partial")
            <div>                    
                @await Html.PartialAsync("_Item4Partial")
            </div>
        </div>
    </form>
</div>
<div class="col-sm-3">    
<div class="panel panel-primary pull-right">
    <div class="panel-heading">
        <h3 class="panel-title"></h3>
    </div>
    <div class="panel-body">
        <p>Blah blah blah.</p>
    </div>        
</div>
</div>

How do I make the bottom panel be positioned at the to right corner. Right now, it's positioned at the bottom right corner of the page. Any help is appreciated. Thanks

Answer 1

I solved the issue with the following solution:

<div class="row">
<div class="pull-left">
<form>
----my partial views---
</form>
</div>
<div class="pull-right">
---my panel----
</div>
</div