This is the code that I am working with:
<div class="row">
<div class="box-body">
<div class="col-lg-12">
<div class="wrapper2">
<div class="col-xs-6">
<ul id="matchline-ul" class="todo-list matchline-options">
@foreach($question->answers as $answer)
@if($answer->is_key == 1)
<li id="matchline-static">
<span class="width-100" id="match-lines-options">
<input type="hidden" name="{{ $question->id }}[]" value="{{ $answer->order }}">
<div id="take-match-line-answer-text">
<span class="text padding-right-20">{!! $answer->text !!}</span>
</div>
</span>
</li>
@endif
@endforeach
</ul>
</div>
<div class="col-xs-6">
<ul class="todo-list">
@foreach($question->answers as $answer)
@if($answer->is_key == 0)
<li id="matchline-dynamic">
<span class="handle width-100">
<input type="hidden" name="{{ $question->id }}[]" value="{{ $answer->order }}">
<div id="take-order-answer-text">
<i class="fa fa-bars"></i>
</div>
<div class="float-left">
<span class="text padding-left-10">{!! $answer->text !!}</span>
</div>
</span>
</li>
@endif
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
Based on this code, I want the cells on the left to always have the same height as the cells on the right when moving them up and down.
If anyone has a solution to achieve this, please let me know. Thank you!