How to avoid jumping the block down?

Question

css

Added a sidebar that pops up on mouse hover. But the problem is that when it slides out, all the content slides down.
How to make the content either move to the right, or adjust to the space itself?

Sidebar code

<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

On CSS
On JS