left/right column with exceeding container

HTML

<div class="container">
    <div class="left">
        <div class="inner">left 1st inner panel</div>
        <div class="inner">left 2nd inner panel</div>
    </div><div class="right">
        <div class="inner">right 1st inner panel</div>
        <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
    </div>
</div>

CSS

.container{
    width:300px;
    background-color:#ccc;
    margin:0 auto;
    overflow:visible;
    border:1px solid red;
}
.container > div{
    width:150px;
    display:inline-block;
    vertical-align:top;
}
.inner{
    position:relative;
    background-color:#666;
    z-index:10;
    margin-top:10px;
    width:10px;
    overflow: hidden;
}
.left .inner{
    margin-left:-10px;
}
.right .inner{
    margin-right:-10px;
    margin-left:auto;
}