Menu example

by Bacher

HTML

<div class="container">
    <div class="toolbar">
        <div class="item active item1"><span>Common</span></div>
        <div class="item item2"><span>Alternative Super Long Long Long</span></div>
    </div>
</div>

CSS

.container {
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,255,.2);
    overflow: hidden;
}
.toolbar {
    width: 100%;
}

.item {
    cursor: pointer;
    padding: 3px 14px;
    background-color: rgba(0,0,255,.2);
    border: 1px solid transparent;
    border-left: 1px solid blue;
    border-bottom: 1px solid blue;
    font-size: 18px;
    height: 28px;
}

.item.active {    
    background-color: transparent;
    border: 1px solid blue;
    border-right: none;
    border-bottom: none;
}

span {
    line-height: 30px;
    padding-bottom: 3px;
}

.item.active span {
    border-bottom: 3px solid red;
}

.item1 {
    float: left;
}

.item2 {
    overflow: hidden;
}