title: How do I align mixed-size divs within a container?
body: <p><strong>Updated based on comments</strong></p>
  
  <p>I'm trying to create div sections on a full sized page by making containers that are 30% of the width. Within those, I plan to have 2 or 3 div sizes aligned within them. I have a row with a large box that occupies 100% of the height, and a portion of the width, and then a box that's exactly half of the size. I'd like to have all of those half-size boxes be in the same row as the larger box  to create a nice stack. I'm assuming it's an issue of size vs position, but I haven't had much luck and I'm over-thinking the issue. </p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/as9hud4k/10/" rel="nofollow">https://jsfiddle.net/as9hud4k/10/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="content_section"&gt;
      &lt;div class="content_thirdsize"&gt;
          &lt;div class="content_thirdsize_inner_row"&gt;
              &lt;div class="content_thirdsize_inner_large"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
  
              &lt;div class="content_thirdsize_inner_small"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content_thirdsize
  {
      width: 500px;
      height: 500px;
      display: inline-block;
      text-align: center;
      vertical-align: top;
      background-color: rgba(83, 35, 128, 0.2);
  }
  
  .content_thirdsize_inner_row
  {
      width: 500px;
      height: 105px;
      display: inline-block;
      background-color: rgba(83, 35, 128, 0.2);
      margin: 2px;
  }
  
  .content_thirdsize_inner_large
  {
      position: relative;
      width: 100px;
      height: 100px;
      display: inline-block;
      background-color: rgba(83, 35, 128, 0.2);
      border: 1px dashed #000;
      vertical-align: left;
  }
  
  .content_thirdsize_inner_small
  {
      position: relative;
      width: 50px;
      height: 50px;
      display: inline-block;
      background-color: rgba(83, 35, 128, 0.2);
      border: 1px dashed #000;
      vertical-align: right;
  }
  </code></pre>