I am trying to vertically align input elements inside h3 tags within a li list. I want them to be in the same 'column' regardless of the text size in the h3. Check out a real example here.
I have attempted adjusting widths using width: calc(..), but couldn't get it to work correctly.
<ul class="prof-list col-md-4">
<li data-id=" 1">
<h3 class="prof-name">Alan Naidon
<input type="checkbox" name="" class="check_prof" value="">
</h3>
<ul class="list-disc ui-sortable" style="display: none;">
<li data-id="3" class="ui-sortable-handle">Ingles</li>
</ul>
</li>
<li data-id=" 2">
<h3 class="prof-name">Antonio Nunnes
<input type="checkbox" name="" class="check_prof" value="">
</h3>
<ul class="list-disc ui-sortable" style="display: none;">
<li data-id="5" class="ui-sortable-handle">Lab II</li>
</ul>
</li>
<li data-id=" 3">
<h3 class="prof-name">Carlos Cardoso
<input type="checkbox" name="" class="check_prof" value="">
</h3>
<ul class="list-disc ui-sortable">
<li data-id="6" class="ui-sortable-handle">Lab I</li>
</ul>
</li>