html - CSS - 如何水平对齐两个列表中的列表元素并排

Question

我在一个弹性框中并排有两个列表，我希望两个列表的元素对齐但是行数不同

即我希望点 2 和点 b 对齐，点 3 和点 c 对齐 示例输出

HTML：

<div class="list-container">
    <ul>
        <li>point 1 extra text extra text</li>
        <li>point 2</li>
        <li>point 3</li>
    </ul>
    <ul>
        <li>point 1</li>
        <li>point 2</li>
        <li>point 3</li>
    </ul>
</div>

CSS：

.list-container {
    display: flex;
    width: 300px;
    border: 1px solid #AAAAAA;
}

.list-container ul {
    width: 50%;
}

JS 小提琴链接：https ://jsfiddle.net/lstewart9/09aLg62t/11/