A DIV element is set to display as a block by default, which means it will take up the full width of its parent element. Since the li element has no fixed width, the div will also take up the entire available width. By applying a border-bottom style to the div, it will span the full width and create a complete line.
There are two potential solutions to this issue, one of which is demonstrated in the code snippet below (you can click "Run Code Snippet" to see it in action).
<ul id="mylist">
<li>
<input type="checkbox" id="[[Array]]" />
<label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label><br>
<span style="border-bottom: 2px solid grey;" class="subtitle">[[Name]]</span>
</li>
</ul>
<ul id="mylist2">
<li>
<div>
<input type="checkbox" id="[[Array]]" />
<label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label>
</div>
<span style="border-bottom: 2px solid grey;" class="subtitle">[[Name]]</span>
</li>
</ul>
In the first solution, we convert the subtitle div into a span, which has inline-block display by default, and add an extra
tag to separate it visually.
In the second solution, we wrap everything except the subtitle in an extra div element to achieve the same outcome.