How to make span and image on the same line?

Question

I have a span element with text in it followed by an image that I want on the same line, but for some reason, it isn't.

I have tried using display: inline-block and whitespace: nowrap but none of them seem to work too.

It currently looks like this, I added red borders so that it is kind of clear.

My current HTML is as follows:

<div class="heading2" style="border: red solid 5px;">
    <div>
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
    </div><div>
        <img src="../assets/thumbnails/responsive_menu_icon-512.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
    </div>
</div>

And it's corresponding CSS is as follows:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.heading2{
    float: right;
}

#headings2_span{
    white-space: nowrap;
}

#headings2_menu{
    width: 7%;
    height: auto;
    float: right;
}

Answer 1

just use flex.

 .heading2{
        float: none;
        display: flex;
        align-items: center;
    }

<div class="heading2" style="border: red solid 5px;">
    <div>
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
    </div><div>
    <img src="align-left.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
</div>