Playing with CSS Transitions

HTML

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>

CSS

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: relative;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

.one:hover + .two {
    top: 100px;
}