Microsoft-Edge & IE - Some inline-block elements doesn't fit

Question

I have a little problem with the browser Microsoft-Edge and IE11 when it comes to displaying certain elements of my website as inline-block, works fine in Chrome, Firefox, Safari..

Please see screenshot for explanation.

These 3 elements are supposed to be aligned. Here's the CSS.

header .container .header-widget .search .statistics ul li {
list-style: none;
display: inline-block;
width: calc(100% / 3);
font-size: 13px;
vertical-align: top;
padding-right: 25px;
box-sizing: border-box;
}

header .container .header-widget .search .statistics ul li .thumb {
float: left;
font-size: 30px;
}

header .container .header-widget .search .statistics ul li .text {
overflow: hidden;
display: block;
padding-left: 15px;
box-sizing: border-box;
}

HTML code:

<div class="statistics">

                    <ul>

                        <li>
                            <span class="thumb"><span class="icon-cart"></span></span>
                            <span class="text">Eksempel tekst 123. Eksempel tekst 123.</span>
                        </li><li>
                            <span class="thumb"><span class="icon-checkmark-circle"></span></span>
                            <span class="text">Eksempel tekst 123. Eksempel tekst 123.</span>
                        </li><li>
                            <span class="thumb"><span class="icon-user"></span></span>
                            <span class="text">Log ind, og få adgang til en masse fordele!</span>
                        </li>

                    </ul>

                </div>

But it's a bit weird though, because I have other inline-block elements on my website which looks good.. Any help will be appreciated, thanks.