title: Link displays on two lines when adding style
body: <p>Thank you all for your time.</p>
  
  <p>I am trying to do something simple but it turns out to be so complicated.
  I need a link to send an email but there's some issue with the style. It shows the content fractured (see jsfiddle). But when I right click several times, everything is back to normal. Any idea?</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>.sendAll {
      float: right;
      margin-right: 10%;
      margin-bottom: 3%;
      margin-top: 2%;
      display: inline-block;
  }
  
  #sendAll {
      color: white;
      padding: 7% 25%;
      background-color: #0080FF;
      display: inline-block;
  }
  
  #sendAll:hover {
      background-color: #0164c6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>HTML:
  
  &lt;div class="sendAll"&gt;
              &lt;a href="#"&gt;
                  &lt;b id="sendAll"&gt;Send Email to All Selected&lt;/b&gt;
              &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the <a href="https://jsfiddle.net/4mkmox9v/" rel="nofollow noreferrer">jsfiddle link</a></p>
  
  <p>Thank you all !</p>