Including HTML arrow in a button
<p>I am designing an HTML email and would like to include a right arrow on a HTML button, and I resorted to using special character and transform-rotate it.</p>

<p>My question is, right now they appear on different lines. How do I wrap the text and the arrow to appear only in one line? I tried using <code>whitespace:no-wrap</code> on the td element, but that does not seem to do the trick. Below is the code snippet. </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;tr&gt;
    &lt;td class="call-to-action" align="center"&gt;
        &lt;button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap"&gt;SCHEDULE ONLINE HERE
            &lt;h1 class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px"&gt;&amp;#8711&lt;/h1&gt;&lt;/button&gt;
    &lt;/td&gt;
&lt;/tr&gt;</code></pre>
</div>
</div>
</p>