动画div在相反的方向上对角滑动以水平对齐（w.pic）？

Question

我在2行描述（一个div，ORANGES ......等）之上有一个标题（APPLES），它位于1行微小描述（GRAPEFRUIT）之上。

由于标题高于描述，我想从它们开始不均匀，然后当用户盘旋在图标（笑脸）上时，它们彼此交叉对齐，以便它们全部对齐。 您可以在图像的右下角看到紫色粉红色和蓝色的前后图。

关于代码LANGS的说明
我正在使用slim和编译.html文件 和.css / scss文件的sass

HTML / SLIM CODE：

div class="fruit"
    div class="fruit-p"
        div id="large"
            | 
                APPLES
        div id="medium"
            p
            |
                ORANGES & LIMES
            br
            |   PINEAPPLES
    div id="small"
        | GRAPEFRUIT

div class="icon"
    img src="sass/modules/smiley.png"

CSS / SCSS / SASS CODE：

.fruit {
height: 100%;
padding: 0 10% 0 20%;
margin:7%;
text-align: left;
} 

.fruit-p {
color: #6641f0;
font-weight: bold;
}

#large {
font-size: 111px;
}

#medium {
font-size: 27px;
text-align: left;
padding-left: 40%;
}

#small {
color: #b0b0b0;
font-size: 16px;
font-weight: lighter;
text-align: left;
padding-left: 40%;
}

如果需要，我非常乐意粘贴更多代码。 谢谢！

的jsfiddle：

https://jsfiddle.net/ge27gopf/