title: divs inside div are displayed below?
body: <p>I have 4 small div's inside another div. Somehow instead of displaying the small ones inside, they are displayed below!</p>
  
  <p>I tried to Google it after playing around and not solving it. Seems to be so simple but I could not find anything related.</p>
  
  <p><a href="https://jsfiddle.net/j4pnh0rz/" rel="nofollow">https://jsfiddle.net/j4pnh0rz/</a></p>
  
  <p>This is how it show right now:</p>
  
  <pre><code>______________________________________________
  | Mat                                         |
  ______________________________________________|
      ________   ________   ________   ________ 
     |       |  |       |  |       |  |       |
     |   B   |  |   C   |  |   A   |  |   M   |
     |_______|  |_______|  |_______|  |_______|
  </code></pre>
  
  <p>This is how it <strong>should</strong> be:</p>
  
  <pre><code>______________________________________________
  | Mat                                         |
  |   ________   ________   ________   ________ |
  |  |       |  |       |  |       |  |       | |
  |  |   B   |  |   C   |  |   A   |  |   M   | |
  |  |_______|  |_______|  |_______|  |_______| |
  ______________________________________________|
  </code></pre>