title: I'm having trouble displaying divs side by side
body: <p>I've done a good amount of research already and I haven't had much luck. In essence, I'm trying to format 4 images (2 x 2) in the right half of a section next to a large image. So far, I can only get two of the four images to display the way I'd like. I'm trying to get the other two to appear directly below the current two.</p>
  <p><a href="https://i.stack.imgur.com/cCQvL.png" rel="nofollow noreferrer">This</a> is is what the section looks like before I add the second two</p>
  <p><a href="https://i.stack.imgur.com/KiYUT.png" rel="nofollow noreferrer">This</a> is what the section looks like after I add the second two.</p>
  <p>This is the relevant HTML:</p>
  <pre><code>      &lt;section&gt;
      &lt;div  style=&quot;font-style: italic;&quot;&gt;
  
        &lt;div style=&quot;float: right;&quot;&gt;
          &lt;div class=&quot;desc tooltip&quot;&gt;
            &lt;img src=&quot;image/alpaca.png&quot; alt=&quot;alpaca image&quot; class=&quot;species&quot; title=&quot;Alpaca (Vicugna pacos)&quot;&gt;
            &lt;p&gt;Alpaca (Vicugna pacos)&lt;/p&gt;
            &lt;span class=&quot;tooltiptext&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;/span&gt;
          &lt;/div&gt;
        
          &lt;div class=&quot;desc tooltip&quot;&gt;
            &lt;img src=&quot;image/llama.png&quot; alt=&quot;llama image&quot; class=&quot;species&quot; title=&quot;Llama (Lama glama)&quot;&gt;
            &lt;p&gt;Llama (Lama glama)&lt;/p&gt;
            &lt;span class=&quot;tooltiptext&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;/span&gt;
          &lt;/div&gt;
          
          &lt;div class=&quot;desc tooltip&quot;&gt;
            &lt;img src=&quot;image/vicuna.png&quot; alt=&quot;vicuna image&quot; class=&quot;species&quot; title=&quot;Vicuna (Vicugna vicugna)&quot;&gt;
            &lt;p&gt;Vicuna (Vicugna vicugna)&lt;/p&gt;
            &lt;span class=&quot;tooltiptext&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;/span&gt;
          &lt;/div&gt;
        
          &lt;div class=&quot;desc tooltip &quot;&gt;
            &lt;img src=&quot;image/guanaco.png&quot; alt=&quot;guanaco image&quot; class=&quot;species&quot; title=&quot;Guanaco (Lama guanicoe)&quot;&gt;
            &lt;p&gt;Guanaco (Lama guanicoe)&lt;/p&gt;
            &lt;span class=&quot;tooltiptext&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;img class=&quot;tree_diagram&quot; src=&quot;image/camelidae tree diagram.png&quot; alt=&quot;camelidae tree diagram&quot;&gt;
  
      &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  <p>This is the relevant CSS:</p>
  <pre><code>.species {
     margin: 5px;
     width: 300px;
     box-shadow: 8px 8px 8px grey;
     border-radius: 20px;
     margin-right: 70px;
  }
  .tree_diagram {
     width: 45%;
     border-radius: 50px;
     border: 2px solid #101010;
     margin: 1em;
  }
  </code></pre>
  <p>I've been at it for a while; I've tried changing the relative position, using flex-box, changing display types, media queries, the list goes on. Any help is appreciated &amp; I tried keeping this as concise as possible so if there is any other information I should include then I will happily do so.</p>