how to put the text in the same line with the button-CodePudding

I'm trying to put the button on the same line as the text and yet,the button goes to the next line (see picture below).

My html and css (using bootstrap) is the following:

<a href="#"  title="Impossible to
                                    {{ selected.blabla }}
                                    or whatever">
    <div >
        <svg  aria-hidden="true" focusable="false">
            <use xlink:href="{% static 'svg-icons/icon-sprite.svg' %}#circle-cross"></use>
        </svg>
    </div>
</a>

The d-inline on the 4th line, used on the div class allows to have everything in a block (or I guess). The float-right on the 5th line allows the svg button to go to the right. Yet, it goes to the next line as you can see in the picture.

I've tried to use a text-nowrap in the div class, to remove the next line, to no effect. I've also tried .justify-content-end and also .align-self-end and other bootstrap tricks found here, to no avail.

If you have any ideas, I'm all ears.

CodePudding user response：

In your case, you need to change div tag to span tag

Here's a simple example

<a>
Sample Text
<span>
<button>button(change this with your svg button)</button>
</span>
</a>