If you don't want the rotated divs size expand it's parent size, you need to take it out of the flow. You may use absolute positioning for this.

The following demo uses this technique and also positions the "expand" element by setting a transform orign and top/right values.

DEMO

CSS :

.right-panel {
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    border:1px solid #ccc;
    background-color:#efefef;
}
.collapse-pane {
    position:absolute;
    border:1px solid #999;
    cursor:pointer;
    top:20%;
    right:100%;
    -ms-transform-origin:100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.collapse-pane span {
    padding:5px;
}

jQuery :

$(document).ready(function () {
    var height = $(".right-panel").height();
    $('.collapse-pane').click(function () {
        if ($(".collapse-pane span").html() == "Expand") {
            $(".panel-body").animate({
                width: 200
            }, 400);
            $(".panel-body-inner").fadeIn(500);
            $(".collapse-pane span").html("Collapse");
        } else {
            $(".panel-body").animate({
                width: 00
            }, 400);
            $(".panel-body-inner").fadeOut(300);
            $(".collapse-pane span").html("Expand");
        }
    });
});