如何使两个单独的无序列表项的高度相同？

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1;
    }
</style>

<div class="container">
    <ul class="item">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <ul class="item">
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
</div>

<script>
    var list1 = document.getElementById("list1");
    var list2 = document.getElementById("list2");
    
    var height1 = list1.offsetHeight;
    var height2 = list2.offsetHeight;
    
    if (height1 > height2) {
        list2.style.height = height1 + "px";
    } else if (height2 > height1) {
        list1.style.height = height2 + "px";
    }
</script>

<ul id="list1">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<ul id="list2">
    <li>列表项4</li>
    <li>列表项5</li>
</ul>