title: Putting Elements side by side
body: <p>I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #idd11 {
  
        float: left;
  
        width 100px;
  
        height 100px;
  
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row row-bottom-padded-sm" id="idd11" style="display: block"&gt;
    &lt;div class="col-md-4 col-md-9 col-xxs-9"&gt;
      &lt;div class="fh5co-project-item to-animate"&gt;
        &lt;div class="fh5co-text"&gt;
          &lt;span&gt;&lt;br&gt;&lt;/span&gt;
          &lt;h2 align="center"&gt;Items List&lt;/h2&gt;
          &lt;span&gt;&lt;br&gt;&lt;/span&gt;
          &lt;div id="MainMenu"&gt;
            &lt;div class="list-group panel"&gt;
              &lt;a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu"&gt;
                                  Item 1
                                  &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
                              &lt;/a&gt;
              &lt;div class="collapse" id="item1"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="list-group panel"&gt;
              &lt;a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu"&gt;
                                  Item 2
                                  &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
                              &lt;/a&gt;
              &lt;div class="collapse" id="item2"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h2 id="answer"&gt;Footer&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--Answer A--&gt;
      &lt;div class="row row-bottom-padded-sm" id="floating" style="display: block"&gt;
        &lt;div class="col-md-4 col-md-3 col-xxs-3"&gt;
          &lt;div class="fh5co-project-item to-animate"&gt;
            &lt;div class="fh5co-text"&gt;
              &lt;span&gt;&lt;br&gt;&lt;/span&gt;
              &lt;div id="MainMenu"&gt;
                &lt;h1 id="newAnswer"&gt;A&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--Answer A--&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.</p>
  
  <p><a href="https://i.stack.imgur.com/ruQgJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ruQgJ.png" alt="my screenshot"></a></p>