How to display multiple moving text in one line instead of multiple lines by marquee tag?

Question

{% for term in terms %}
    <marquee behavior="scroll" direction="right" scrollamount="1" > {{ term }}</marquee>
{% endfor %}

For example, if terms is:

terms = ['term1', 'term2', 'term3']

They are currently displayed vertically and moving to the right:

term1
term2
term3

But I hope them to be displayed at one line when moving:

term1 term2 term2

Is this possible with the marquee tag?

Answer 1

Just try

.marquee-wrapper {
  display: flex;
}

marquee {
  flex: 1;
}

<div class="marquee-wrapper">
    <span>Recent Items: </span>
    <marquee style="background-color: yellow;" behavior="scroll" direction="right" scrollamount="1">
        <!-- {% for term in terms %}
            {{ term }}
        {% endfor %} -->
        Text to move
    </marquee>
</div>

Which will put all the texts in a single marquee, and it will be moving one after another.

EDIT

Added background-color to the marquee tag

EDIT-2

Added a text right before the marqee