title: Twitter Bootstrap grid inside a panel
body: <p>I am trying to use the grid system of Bootstrap to accomplish having an image to the left side while being able to have content (text &amp; other bootstrap components) filling the space to the right. The only problem I have with this is that I cannot get the text to go where I want it to.</p>
  
  <p>The text "STUFF" represents the content. I would like the content to be put to the right of the image &amp; not below (the boxed area shown below). I tried using a grid system to accomplish this but I am either doing it incorrectly or I cannot use this method.</p>
  
  <p><img src="https://i.stack.imgur.com/APAyB.png" alt="screenshot"></p>
  
  <p>I am using Twitter Bootstrap version 3.0.2. My HTML code is present below (excuse the inefficient code, I was using this to play around) &amp; I am using the Bootstrap .css &amp; .js files, with some minor edits that do not pertain to my problem.</p>
  
  <p>Additional information:
  I am using 2 HTML pages (how absurd, right?), 1 (the lighter area) within the other (the main page/the darker/outer area). The HTML code I provide is the code to the inner page.</p>
  
  <p>Also, I would like to know how to have a 'horizontal' <code>&lt;hr&gt;</code> between the image and the content.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;TITLE&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href="../../assets/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body style="background-color: #F0F0F0; padding-top: 15px"&gt;
              &lt;div class="panel panel-default" style="margin-left: 15px; margin-right: 15px"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-2"&gt;
                              &lt;img src="http://placehold.it/140x140" class="img-rounded" style="width: 100px; height: 100px"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-10"&gt;
                              STUFF
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;hr&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="../../assets/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>