How to make bootstrap icon display inline with text in a tag?

Question

I have bootstrap navigation pill that shows text and an arrow. Unfortunately if the text is to long the arrow appears on the border of the anchor. Html looks like this.

Answer 1

Using css white-space:nowrap; solves text in one line issue.

.subject-pill > a {
    border-style: solid;
    border-width: 1px;
    white-space:nowrap;
}
 .subject-pill{ 
    width: 218px;
 }

reference site : white space no wrap