JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id='exampleSideBar'>
        </div>
        <div id='exampleFlyout'>
            <h2>Desired result during the hover</h2>
        </div>
        
        <div id='clear'></div>
        
        <div id='sideBar'>
            <h2>Hover Over Me</h2>
        </div>
        <div id='flyout'>
            <h2>Flyout</h2>
            <p>Now how do I get rid of the border where the sideBar and flyout meet?</p>
        </div>


    </body>
</html>

CSS

#sideBar {
    width: 75px;
    height: 50px;
    padding: 5px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    background: #E7E7E7;
}

#flyout {
    border: 2px solid black;
    position: absolute;
    height: 200px;
    background: #E7E7E7;
    padding: 5px;
    width: 100px;
}

#flyout h2 {
    font-weight: bold;
    margin-bottom: 5px;
}

#exampleSideBar {
    float: left;
    width: 75px;
    height: 50px;
    padding: 5px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    background: #E7E7E7;
    position: relative;
}

#exampleFlyout {
    float: left;
    border: 2px solid black;
    width: 110px;
    height: 200px;
    background: #E7E7E7;
}

#clear { clear: both; height: 30px; }
body { padding: 5px; }

JavaScript

$(function() {
    positionFlyout();
    
    $('#sideBar').hover(function() {
       $('#flyout').show('slide');
    }, function() {
       $('#flyout').hide('slide');
    }); 
});

function positionFlyout() {
    $('#flyout').position({
        my: 'left top',
        at: 'right top',
        of: $('#sideBar'),
        offset: '-2, 0'
    }).hide();
}