html - 调整元素的高度以匹配 CSS 中另一个元素的高度

Question

我有这个代码:

<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>

结果就像这张照片:

每次上下移动单元格时，我都需要左侧的单元格与右侧单元格的高度匹配，以使左侧单元格的高度与右侧单元格的高度相同

有人可以帮我解决这个问题吗？

Answer 1

使用表格而不是列表或div会自动调整高度和宽度