Content Area doesn't render properly in On-Page Editing?

I am using Twitter Bootstrap with the EpiBootstrapAreas plugin and have created a Content Area to render a side-bar on one of my pages.

The markup on the page looks like so:

<div class="row"><div class="col-md-9"><p class="lead">
                    @Html.PropertyFor(x => x.CurrentPage.Teaser)</p><div class="description">
                    @Html.PropertyFor(x => x.CurrentPage.DetailedDescription)</div></div><div class="col-md-3">
                @Html.PropertyFor(x => x.CurrentPage.Sidebar, new { Tags = "sidebar", rowsupport = false })</div></div>

I've dropped a block inside which has this markup:

<div class="panel average-weather"><div class="panel-heading"><p>
            @Html.PropertyFor(x => x.Heading)</p></div><div class="averages temp"><span class="icon"></span><span class="lbl">@Html.PropertyFor(x => x.TemperatureLabel)</span><span class="amount">@Html.PropertyFor(x => x.Temperature)℃</span></div><div class="averages rain"><span class="icon"></span><span class="lbl">@Html.PropertyFor(x => x.RainLabel)</span><span class="amount">@Html.PropertyFor(x => x.Rain)mm</span></div></div>

When rendered in edit mode, however, I visually see this: https://prnt.sc/k0v3t9

How can I get the 'You can drop content here or Create a new Block' div to appear at the bottom of this content area similar to the other content areas on my website?  I'm confused as to how Epi is calculating where this element should be displayed.