slideDown works, but when I change to slideUp, it stops working

Question

I have 2 small divs, side by side in a bigger div, display flex. I want one of the small divs to appear by sliding up, and the other by sliding down. They both work fine when sliding down, but when I change one to slide up, it doesn't show the div.

I've tried position:relative, also in jQuery using the hide() and show() functions instead of just display: none in my css. But I know that the display:none in css works fine with the sliding down, so I just Don't get it!

   <div class="nousEtMission">
        <div id="quiSommesNous"> TEST 1
        </div>
        <div id="mission"> TEST 2
        </div>
    </div>

<script>

        $(document).ready(function () {
        $("#header").fadeIn(1500);
        $("#quiSommesNous").slideUp(3000);
        $("#mission").slideDown(3000);
</script>

.nousEtMission{
    display: flex;
    justify-content: space-evenly;
    height: 30vh;
}

#quiSommesNous{
    display: none;
    position: relative;
    background-color: rgb(123, 216, 35);
    width: 50%;
}

#mission{
    display: none;
    position: relative;
    background-color: rgb(26, 207, 132);
    width: 50%;
}