title: How to divide a Twitter bootstrap modal into 2 parts
body: <p><img src="https://i.stack.imgur.com/uooOI.png" alt="enter image description here"></p>
  
  <p>I have the following html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-body"&gt;
          &lt;table&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload"&gt;
                              &lt;div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"&gt;&lt;/div&gt;
                              &lt;div&gt; &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;Select image&lt;/span&gt;
                                  &lt;span
                                  class="fileupload-exists"&gt;Change&lt;/span&gt;
                                      &lt;input type="file" /&gt;
                                      &lt;/span&gt; &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;Remove&lt;/a&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div class="progress"&gt;
                              &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;button class="btn btn-mini" type="button"&gt;Upload&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>