How to resolve IE alignment when styling a uib-accordeon?

Question

Good staff,

I’m having some difficulties when I do styling uib-accordion. Chrome/IE/Firefox results are different from IE11. How can I fix this?

Here is my HTML:

<uib-accordion close-others="oneAtATime ">
<div ng-repeat="menuElement in vm.menuElements" class ="parent-container" ng-init="parentIndex = $index">
    <div uib-accordion-group is-disabled="false">
        <uib-accordion-heading>
            <div class="parent">
                <i class="{{menuElement.iconClass}}"></i>
                <a>{{menuElement.menu}}</a>
                <i class="go-right {{menuElement.iconClass}}"></i> 
            </div>
        </uib-accordion-heading>
    </div>
</div>

And my SASS:

.parent-container
    .panel
        background-color: transparent
        border: none

        .panel-heading
            background-color: transparent
            padding-left: 0px
            height: 35px

            .panel-title
                width: 100%

                .parent
                    align-items: center
                    display: flex
                    width: 100%

                    i
                        font-size: 2.2em
                    a
                        font-size: 14px

                .go-right
                    position: absolute
                    right: 0px

Chrome/Edge/Firefox results (which are correct):

Result on IE11:

As you can see, the element that is using the go-right class is correct when using Chrome/Firefox/Edge. However, when I use IE, the result is not the same.

I am trying everything to solve this problem, but for some reason IE is not happy with the position: Absolute of the go-right class. Note that all items in each div must be aligned vertically, which is why I’m using the flex display property.

Thanks this time.