Align two inline-block elements inside table-cell to opposite sides
<p>I want to left align one div and right align another div inside of a table cell.  I've tried to justify the text but it doesn't seem to be working with my setup. <em>Looking for a pure css solution.</em> <strong>Also I also am not able to use floats.</strong></p>

<p>The demo below will show my current layout.  The logo is irrelevant but it's part of my setup so I'm including it.</p>

<p>"Menu Link" should be aligned left. "Facebook" should aligned right.</p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="row-height"&gt;
  &lt;div class="logo-text col-middle"&gt;
    &lt;span&gt;Logo Text&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="menu-social-outer col-middle text-justify"&gt;
    &lt;div class="menu"&gt;
      &lt;a href="#"&gt;Menu Link&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="social"&gt;
      &lt;a href="#"&gt;Facebook&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Demo: <a href="https://jsfiddle.net/yq9nyyg1/" rel="nofollow">https://jsfiddle.net/yq9nyyg1/</a></p>