Bootstrap 5 - класс d-flex изменение ширины флажка
У меня есть список продуктов, где в каждой строке есть 3 элемента: флажок, метка и количество компонентов, связанных с этим продуктом. Я хочу, чтобы все элементы были в 1 строке.
У меня проблема с шириной флажка, потому что d-flex изменяет ширину флажка, если заголовок продукта слишком длинный.
Выглядит это следующим образом:
Я пытался использовать систему сетки, но она перемещает мой элемент span на следующую строку, когда текст слишком длинный.
Мой вопрос в том, как я могу исправить эту ошибку и сделать все флажки одинаковыми?
{% for product in product_list %}
<div class="form-check business-challange-item d-flex">
<input class="form-check-input" type="checkbox" value="{{product.title}}" id="{{product.title}}">
<label class="form-check-label px-2" for="{{product.title}}">{{product.title}}</label>
<span class="text-muted f-12">{{product.count}}</span>
</div>
{% endfor %}