transition not working

transition messes up page

by j5m____

HTML

<div class="wrapper">
    <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>

CSS

.wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .main-element {
        position: fixed;
    /* 
    it might be necessary to run the fiddle without the 'left' and 'top' values once
    and then reassigning them and running it again, it somehow seems to be broken on
    JSFiddle 
    */
        left: -100px;  
        top: 100px;
        rotate: 90deg;
        color: black;
    }
    #element-to-appear {
        display: inline-block;
        position: absolute;
        opacity: 0;
        transition: opacity .5s;
    }
    #remaining-letters {
        transition: .6s;
    }
    .main-element:hover #element-to-appear {
        opacity: 1;
    }
    .main-element:hover #remaining-letters {
         margin-left: 50px;
         transition: .25s;
    }