How to adjust the position of accordion so that the menu does not shift?

Question

Here is jsfiddle.

I tried to create a jQuery ui tab inside an accordion and I did not use CSS file provided by jQuery. Therefore, it results in a situation shown on the image.

CSS

#accordion, #tabs{
    float: left;
}
#accordion{
    width:40%;
}
.ui-tabs-vertical {
    width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
     width: 12em; 
}
.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; 
    width: 100%; 
    border-bottom-width: 1px !important; 
    border-right-width: 0 !important; 
    margin: 0 -1px .2em 0; 
}
.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; 
    color:rgb(51,51,51);
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0; 
    padding-right: .1em; 
    border-right-width: 1px; 
}
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em; 
    float: right;
    width: 40em;
}

HTML

<div id="accordion">
            <h3>ITEMS</h3>
            <div id="ver_tab">
                <ul>
                    <li><a href="#ver_1">Item</a></li>
                    <li><a href="#ver_2">Item</a></li>
                    <li><a href="#ver_3">Item</a></li>
                    <li><a href="#ver_4">Item</a></li>
                    <li><a href="#ver_5">Item</a></li>
                    <li><a href="#ver_6">Item</a></li>
                    <li><a href="#ver_7">Item</a></li>
                    <li><a href="#ver_8">Item</a></li>
                    <li><a href="#ver_9">Item</a></li>
                </ul>
                <div id="ver_1">
                    <p>test</p>
                </div>
                <div id="ver_2">
                </div>
                <div id="ver_3">
                </div>
                <div id="ver_4">
                </div>
                <div id="ver_5">
                </div>
                <div id="ver_6">
                </div>
                <div id="ver_7">
                </div>
                <div id="ver_8">
                </div>
                <div id="ver_9">
                </div>
            </div>
            <h3>FEATURES</h3>
            <p>Coming soon!</p>
        </div>

javascript

$(function(){
    $('#accordion').accordion({
        collapsible:true,
        heightStyle: "content"
    });
    $('#ver_tab').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $('#ver_tab li').removeClass("ui-corner-top").addClass("ui-corner-left");
});

Whenever I expand ITEM menu, FEATURES just shift to the right where the content of tab is located. I tried to change the position to relative, and heightStyle to "content" but things don't change. What should I do to get rid of this shifting problem without using jQuery CSS file since I was asked to follow a specific style.