Как избежать перепрыгивание блока вниз?

Question

[Андрей Голубков]

Поставил сайдбар, который выдвигается при наведении мышки. Но проблема в том, что когда он выдвигается весь контент съезжает вниз.
Как сделать так, что бы контент или сдвигался вправо, или подстраивался под пространство сам ?

Код сайдбара

<div class="left">
        <div class="item">
            <span class="glyphicon glyphicon-th-large"></span>
        </div>
        <div class="item active">
            <span class="glyphicon glyphicon-th-list"></span>
            Все документы
        </div>
        <div class="item">
            <span class="glyphicon glyphicon-log-out"></span>
            Расходные накладные
        </div>
        <div class="item">
            <span class="glyphicon glyphicon-log-in"></span>
            Приходные накладные
        </div>
        <div class="item">
            <span class="glyphicon glyphicon-random"></span>
            Акты переоценки
        </div>
        <div class="item">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
    </div>

CSS

.left, .right {
        float:left;
        height:100vh;
    }
    
.left {
        background: #337ab7;
        display: inline-block;
        white-space: nowrap;
        width: 50px;
        transition: width 1s ;
    }
.left:hover {
        width: 250px;
    }    
    
.item:hover {
        background-color:#ccc;
        }
        
.left .glyphicon {
        margin:15px;
        width:20px;
        color:#fff;
    }
span.glyphicon.glyphicon-refresh{
    font-size:17px;
    vertical-align: middle !important;
    }
    
.item {
        height:50px;
        overflow:hidden;
        color:#fff;
    }
.title {
        background-color:#eee;
        border-style:solid;
        border-color:#ccc;
        border-width:1px;
        box-sizing: border-box;
    }

Answer 1

[Alexander Belov]

На CSS
На JS