title: Columns and rows flex
body: <p>So, I am having an issue where I can mostly get my flexbox working, except when it comes to two columns side by side with uneven rows beside each other. For the life of me I can't figure out why it isn't working.</p>
  
  <p>Here is the screenshot of how it looks now:
  <a href="http://prntscr.com/ndig4v" rel="nofollow noreferrer">http://prntscr.com/ndig4v</a> (by lightshot)
  <a href="https://i.stack.imgur.com/PiFzH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PiFzH.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML:</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>/* Stats */
  #stats-container {
    width: 100%;
    height: 100%;
    border: 1px black solid;
  }
  #free-stats {
    width: 100%;
    height: 45%;
    border: 1px black solid;
  }
  #stats-column-one,
  #stats-column-two {
    display: flex;
    flex-direction: column;
  }
  #stats-column-one {
    width: 75%;
  }
  #stats-column-two {
    width: 25%;
  }
  #stats-flex-one,
  #stats-flex-two {
    display: flex;
    flex-direction: row;
  }
  #str-row,
  #end-row,
  #dex-row,
  #eva-row,
  #int-row,
  #res-row,
  #has-row {
    background: black;
    display: flex;
    flex-direction: row;
    position: relative;
    width: 55px;
    border: 1px yellow solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="stats-container" class="yellow-black-shadow"&gt;
    &lt;div id="free-stats"&gt;FS&lt;/div&gt;
    &lt;div id="stats-column-one"&gt;
      &lt;div id="stats-flex-one"&gt;
        &lt;div id="str-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="str"&gt;SR&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="dex-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="dex"&gt;DR&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="int-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="int"&gt;IR&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="stats-flex-two"&gt;
        &lt;div id="end-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="str"&gt;ER&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="eva-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="eva"&gt;VR&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="res-row"&gt;
          &lt;div class="stat-icon"&gt;&lt;/div&gt;
          &lt;div id="res"&gt;RR&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="stats-column-two"&gt;
      &lt;div id="has-row"&gt;
        &lt;div class="stats-icon"&gt;&lt;/div&gt;
        &lt;div id="has"&gt;HR&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically everything is correct, until it reaches the HR block, it SHOULD be on the right side. I want avoid using <code>float: right;</code></p>
  
  <p>I'm pretty sure I am doing this in the wrong order, but I am not sure which order I am messing up. I've played with it some, but each different thing I try I seem to break a bit more, this is the closest I've gotten.</p>