How to add text next to an image and right below it. All text must be to the right of the picutre

Question

I'm fairly new to HTML and I've been developing a website for a Frat I basically want to have a logo and some text next to it. I'm having issue with the "Gamma Nu Chapter", how can I add it so it can look like this image here.

This is my code:

<div>
            <a class="navbar-brand" href="{% url 'home' %}">
                <img id="logo" src="{% static 'images/SigmaNuLogo.jpg' %}" alt="">
                Sigma Nu @ University of Michigan
                <p>Gamma Nu Chapter</p>
            </a>
</div>

The Gamma Nu Chapter part appears at the bottom of the logo and the first text line. I want it to appear just below the Sigma Nu part like in the picture

Answer 1

You just need to wrap your text in a div like this:

<div>
        <a class="navbar-brand" href="{% url 'home' %}">
            <img id="logo" src="{% static 'images/SigmaNuLogo.jpg' %}" alt="">
            <div>
                Sigma Nu @ University of Michigan
                <p>Gamma Nu Chapter</p>
            </div>
        </a>
</div>

And then apply some CSS to make the image and div display side by side.

Something like .navbar-brand { display: flex; }