CSS create sidebar and content and in sidebar box top and bottom with table style

box top and bottom with table style

<style>
.wrapper {
    height: 100%;
    position: relative;
}
.sidebar {
    width: 100px;
    float: left;
    height: 100%;
    position: absolute;
}
.sidebar-inner {
    width: 100%;
    display: table;
}
.tr {
    display: table-row;
}
.td {
    display: table-cell;
}

.content {
    margin-left: 110px;
}

.box {
    height: 50px;
    width: 50px;
    margin: 0 auto;
}
.box-top {
    background-color: red;
}
.box-bottom {
    margin-top: 20px;
    background-color: blue;
}
.v-top {
    vertical-align: top;
}
.v-bottom {
    vertical-align: bottom;

</style>
<div class="wrapper">
    <div class="sidebar">
        <div class="sidebar-inner" border="1" style="height:100%">
            <div class="tr">
                <div class="td v-top">
                    <div class="box box-top">top</div>
                </div>
            </div>
            <div class="tr">
                <div class="td v-bottom">
                    <div class="box box-bottom">bottom</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="content">
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />
        xxxxxxxxx <br />        
     
    </div>
</div>