Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure:
<div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}">
<div class="col-md-2 list">
<button onclick="text(this)" class="add-div btn btn-success btn-sm">add div</button>
<button class="delete-div btn btn-danger btn-sm">delete div</button>
<div class="class-to-div">
{% for innerdiv in div.innerdivs %}
<div class="list-item" data-column="{{ innerdiv.sveti_id }}" data-position="{{ innerdiv.position }}" id="{{ innerdiv.pk }}"> {{ innerdiv.text}} <span class="caret mycaret mydropdown"></span></div>
{% endfor %}
</div>
</div>
</div>
The issue I'm experiencing is that the <span> element should be positioned at the right end of the ".list-item" div, but it keeps appearing after the {{ innerdiv.text }} content no matter what adjustments I make.