Checkboxes are not the same height as input boxes - Bootstrap - html

Question

I want the checkboxes on the left side to be the same height as the text input boxes on the right.
HTML:
{% block content %}
<h1>{{ls.name}}</h1>
<form method="post" action="#">
{% csrf_token %}
{% for item in ls.item_set.all %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
{% if item.complete == True %}
<input type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
</div>
</div>
<input type="text", value="{{item.text}}" class="form-control">
</div>
{% endfor %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="submit", name = "newItem", value="newItem" class="btn btn-primary">Add Item</button>
</div>
<input type="text", name="new">
</div>
<button type="submit", name = "save", value="save" class="btn btn-primary">Save</button>
</form>
{% endblock %}

Answer 1

give you check box class then in you linked css give checkbox height and width acc to your need
<div class="input-group-text">
{% if item.complete == True %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}" checked>
{% else %}
<input class="check" type="checkbox", value="clicked", name="c{{item.id}}">
{% endif %}
then in your css
.check {
height:20px;
width:20px;
}