JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lte IE 8]>
    <script src="http://axor.medialize.de/scripts/html5.js"></script>
<![endif]-->
<button id="switch">switch</button>
<article>
    <section>
        <p class="regular" style="height: 100px;">some content</p>
        <p class="minimal" style="height: 200px">some <br>more</br> content</p>
    </section>
</article>

CSS

article {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    background: #EEE;
}
section {
    display: block;
    position: relative;
    margin: 10px 10px 10px 60px;
    width: 200px;
    background: #DDD;
    border: 1px solid red;
}

section.hover {
    background: #CCFFFF;
}

/* arrows */

section:after, 
section:before { 
    right: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none;
    
    @include transition(top, 0.2s, ease-out);
}
section:after { 
    border-right-color: lime; 
    border-width: 10px; 
    top: 50px; 
    margin-top: -10px; 
}
section:before { 
    border-right-color: green; 
    border-width: 11px; 
    top: 50px; 
    margin-top: -11px;
}


/* switch content */
.one .minimal { display: none; }
.two .regular { display: none; }
.two .minimal { display: block; }

.two section:before {
    content: "";
    top: 150px; 
}

.two section:after {
    content: "";
    top: 150px; 
}

/* 
    the empty hover makes IE reposition the
    cssArrow on hover. remove this, and the 
    cssArrow will never reposition. wtf?
*/
section:hover {  }

JavaScript

/*
    Problem: IE8 won't update the position of generated content
    Hover over the element to make IE8 reposition the element.
    Question: what does the CSS' :hover do in IE8 and how can
    I trigger that from JS?

*/

$(function(){
    
    $(document).on('mouseenter', 'article > section', function(e) {
        $(this).addClass('hover');
    }).on('mouseleave', 'article > section', function(e) {
        $(this).removeClass('hover');
    });
    
    $(document.body).addClass('one');
    $('#switch').on('click', function(e) {
        $(document.body).toggleClass("one two");
    });
});