Link displays on two lines when adding style - html

Question

Thank you all for your time.
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?
.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;
}
HTML:
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Here's the jsfiddle link
Thank you all !

Answer 1

Just provide display: block to #sendAll
The <b> tag provides a font-weight: bold property to the element, but the element is not a block level element by itself. So, you have to manually specify the same.
Refer 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: block;
}
#sendAll:hover {
background-color: #0164c6;
}
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>

Answer 2

Try this:
.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;
white-space:nowrap;
}
#sendAll:hover {
background-color: #0164c6;
}
Explain
Add a property white-space:nowrap in #sendAll id
update code link

Answer 3

if you want your text on only one line, add the following to your #sendAll class
white-space: nowrap;