Bootstrap floating div in tab-menu
<p>I made a tab-menu using Bootstrap.</p>

<p>But I need some info placed in the right side of the page, on line with the tabs.</p>

<p>But I can't seem to figure it out.</p>

<p>So far I end up with this:
<a href="https://i.stack.imgur.com/Jnfrr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jnfrr.png" alt="Div above tab menu"></a></p>

<p>What I need is this (Photoshopped to show what I need):
<a href="https://i.stack.imgur.com/ibux9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ibux9.png" alt="Div on line with the tab menu"></a></p>

<p>The demo markup is here:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
    &lt;div class="container body-content"&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="tabbable"&gt;
                &lt;div&gt;
                    This is a test &lt;button class="btn btn-primary btn-xs" type="submit"&gt;Test button&lt;/button&gt;
                &lt;/div&gt;

                &lt;ul class="nav nav-tabs" id="pageTabs"&gt;
                    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tab4" data-toggle="tab"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tab5" data-toggle="tab"&gt;Tab 5&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tab6" data-toggle="tab"&gt;Tab 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;

                &lt;div class="container"&gt;

                    &lt;div class="tab-content"&gt;
                        &lt;div class="tab-pane active" id="tab1"&gt;
                            &lt;h4&gt;Tab 1&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="tab-pane" id="tab2"&gt;
                            &lt;h4&gt;Tab 2&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="tab-pane" id="tab3"&gt;
                            &lt;h4&gt;Tab 3&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="tab-pane" id="tab4"&gt;
                            &lt;h4&gt;Tab 4&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="tab-pane" id="tab5"&gt;
                            &lt;h4&gt;Tab 5&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="tab-pane" id="tab6"&gt;
                            &lt;h4&gt;Tab 6&lt;/h4&gt;
                            &lt;p&gt;Content&lt;/p&gt;
                        &lt;/div&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Hope someone can help me in the right direction :-)</p>