title: HTML layout - display: inline-block instead of float not working
body: <p>Sry for the bad title, I couldn't come up with something more descriptive... </p>
  
  <p>I have four types of content, each one in a separate div like this: </p>
  
  <pre><code>&lt;div id="item1"&gt;
    some content
  &lt;/div&gt;
  &lt;div id="item2"&gt;
    some content
  &lt;/div&gt;
  &lt;div id="item3"&gt;
    some content
  &lt;/div&gt;
  &lt;div id="item4"&gt;
    some content
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to place them so #item1 &amp; #item2 sits next to each other on the first row and #item3 &amp; #item4 next to each other on the second row (forming a square together). </p>
  
  <p>I know how to do this with floats: </p>
  
  <pre><code>#item1, #item3 {
    float: right;
  }
  </code></pre>
  
  <p>but our teacher want's us to use "display: inline-block" for this website. I've tried to find and answer but the only thing I could come up with was to put the items in sets of two: </p>
  
  <pre><code>&lt;div id="content1"&gt;
    &lt;div id="item1"&gt;
      some content
    &lt;/div&gt;
    &lt;div id="item2"&gt;
      some content
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="content2"&gt;
    &lt;div id="item3"&gt;
      some content
    &lt;/div&gt;
    &lt;div id="item4"&gt;
      some content
    &lt;/div&gt;
  &lt;/div&gt;
  
    #item1, #item2 {
      display: inline-block;
    }
  
    #item3, #item4 {
      display: inline-block;
    }
  </code></pre>
  
  <p>And that's not an option since I need to be able to move elements individually by using media queries :/ for example float #item1 in a separate direction on the homepage while #item2 moves elsewhere, I hope you understand what I mean.</p>
  
  <p><em>EDIT</em> To clearify I want "lemon" to be right under "apple": <a href="https://jsfiddle.net/1hj3L018/1/" rel="nofollow">https://jsfiddle.net/1hj3L018/1/</a></p>