Как разделить полученный данные из модели many-to-many при отображении в html?

Question

[Enter_a_nickname]

Доброго времени суток
Вопрос следующий, как я могу разделить полученный данные при выводе в html или как их правильно отдельно выводить?
Мои модели:

class Variety(models.Model):
    varietyName = models.CharField(max_length=30)

    def __str__(self):
        return self.varietyName

class Fruits(models.Model):
    name = models.CharField(max_length=255)
    variety = models.ManyToManyField(Variety)

    def __str__(self):
        return self.name

мое представление:

def index(request):
    return render(request, 'index.html', {'fruits': Fruits.objects.all().order_by('-id')[:1]})

и мой html:

{% for fruit in fruits %}
    <h5>{{ fruit.name }}</h5> // название фрукта
    {% for v in fruit.variety.all %}
        <h5>{{ v.varietyName }}</h5> // название вида
    {% endfor %}
{% endfor %}

На выходе я получаю 2 значения, предположим "бананы" и "кокосы" (если допустим в крайней записи было добавлено 2 поля varietyName, но может быть и больше)
Данные 2 значения я получаю с помощью 1 строки в html

{{ v.varietyName }}

, но мне необходимо разместить каждое полученное значение
по своим координатам на html странице. Как я могу разделить полученные данные из модели many-to-many?

Comments

[Enter_a_nickname]

Александр, что css? в css я могу разделить полученный результат?

[Enter_a_nickname]

Александр, я знаю, что я могу взять строку

{{ v.varietyName }}

добавить к ней класс и в css указать где должны располагаться данные. Но проблема в том, что это повлияет на все полученный данные. т.е. "бананы кокосы" переместятся вместе, а мне необходимо их разделить

[Enter_a_nickname]

Dr. Bacon, уверены, что не про джанго? Александр рекомендует через модели закрыть задачу

[Сергей Сергей]

Вложенный цикл в показанном отрывке шаблона создаст список с иерархией, а для отображения данных "многие ко многим" больше подходит вариант с двумя плоскими списками.

я js-ер, я так вижу