Position elements left and right on same line, or both left if not enough space
<p>What I want:</p>

<p>When there's enough space, it's like this:
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.left{
  display: inline-block;
  float: left;
}

.right{
  display: inline-block;
  float: right;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='parent'&gt;
  &lt;div class='left'&gt;This should be on the left&lt;/div&gt;
  &lt;div class='right'&gt;And this should be on the right :)&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>When there's not enough space, it's like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class='parent'&gt;
   &lt;div class='left'&gt;This should be on the left&lt;/div&gt;
   &lt;div class='right'&gt;And this should be on the right :)&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How do I do that?</p>