旋转div whitouth破结构

Question

我试图让旋转的块在窗口右侧的剩余块顶部对齐。

小提琴：https://jsfiddle.net/8tbL6rqs/1/

<div class="side">
    <div class="block-first">Chat with us</div>
    <div class="block">Phone</div>
    <div class="block">Mail</div>  
<div>

.side {
    position:absolute;
    right:0px;
    margin-top:30%;
}

.block, .block-first {
    background: #f00;
    display: block;
    height: 50px;
    width:50px;
    text-align:center;
    line-height:50px;
}

.block-first {
    width:200px!important;
    transform: rotate(-90deg);
}

Answer 1

将以下css添加到.block-first：

position:relative;
top:-75px;
left:-75px;

以下是更新的 fiddle 。