调整元素的高度以匹配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

使用表而不是list或div将自动调整高度和宽度