Edit in JSFiddle

<div id="regularKeyboard">
    <div class="key chromaC c0menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaDflat c1menu"></div>
    </div>
    <div class="key chromaD c2menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaEflat c3menu"></div>
    </div>
    <div class="key chromaE c4menu"></div>
    <div class="key chromaF c5menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaGflat c6menu"></div>
    </div>
    <div class="key chromaG c7menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaAflat c8menu"></div>
    </div>
    <div class="key chromaA c9menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaBflat c10menu"></div>
    </div>
    <div class="key chromaB c11menu"></div>
</div>
#regularKeyboard {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 96px;
}
#regularKeyboard div {
    display: table-cell;
    height: 96px;
}
.key {
    /*White key styling*/
    background: #fff;
    /*Default grayed-out look of the key*/
    border: 1px solid #3F3F3F;
    z-index: 4;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}
.innerKey {
    display: table-cell;
    height: 100px;
    width: 0px;
    z-index: 5;
}
.blackkey {
    position: absolute;
    /*Black key styling*/
    background: #000;
    width: 7%;
    height: 57px !important;
    /*Default grayed-out look of the key*/
    border: 1px solid #3F3F3F;
    border-top: 2px solid #000;
    z-index: 6;
    margin-left: -3.5%;
}