Float right moves the span element up?
<p>Hi i have beeen trying to make <code>span</code> and <code>h1</code> element on the same line. However <code>float:right</code> will result span to move top. I have tried with different approach, i dont want to use margin property. Any sugesstions on this?</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>.pull-left {
  float: left;
  width: 70%;
}

.pull-right: {
  float: right;
  width: 20%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block"&gt;
  &lt;h1 class="pull-left"&gt;Carl&lt;/h1&gt;
  &lt;span class="pull-right"&gt;$4.81&lt;/span&gt;
  &lt;div style='clear:both'&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Any help would be appreciated.</p>