CSS - how to align horizontally align list elements in two lists side by side

Question

I have two lists side by side in a flexbox, I would like the elements of the two lists to be aligned however the number of lines is different

i.e. I would like point 2 and point b to be aligned and point 3 and point c to be aligned example output

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 fiddle link: https://jsfiddle.net/lstewart9/09aLg62t/11/