CSS columns not working correctly in Chrome and Opera

I'm trying to fix an annoying CSS bug on a WordPress site that I'm developing and am hoping that someone here can help me.  If you view this page in either Firefox, Edge, or IE11 and scroll down to the bottom -- you'll notice that the 2 social icons are being displayed to the right of the 3 links (ie: Privacy Policy, Terms of Use, Sitemap).  

https://rgc.touchstoneliving.com/

This appears to be being achieved using this CSS rule:

.widget-pages ul {
    list-style: none;
    columns: 2;
}

Select allOpen in new window

... where "columns: 2" is suppoedly splitting the 5 different list items into 2 separate columns.  

However, .. if you view the same page using either Chrome or Opera, ..the Instragram social icon is for some reason being displayed at the bottom of the first column instead of at the top of the 2nd column.   My assumption was that the CSS would try to evenly split the 5 different list items into the 2 different columns - with the first 3 list items being displayed in the 1st column, and the remaining 2 in the 2nd column.  But obviously this isn't the case.

How can I fix this?  Is there any way that I can tweak this CSS rule somehow so that it forces the last 2 list items to be displayed in the 2nd column (in Chrome and Opera)? If so, how?

- Yvan