CSS - 显示：表留下空白

Question

使用display时遇到问题：table;并显示：table-cell;在CSS。

当我的左div的内容太大时，我就这样做了，因此右边div中的内容会调整到新的大小，只是现在它留下了他们不属于的空白区域。

JSFiddle example

截图：

纠正空白：

空格不正确：

我的CSS：

.module{
    width: 400px;
    display: table;
}

.module-info {
    display: table-cell;    
    border: medium dashed #03F;
}
.module-controls-wrapper {
    display: table-cell;
    border: medium solid #C00;
    text-align: center;
}

.module-controls{
    position: relative;
    margin: 0 auto;
    max-width: 256px;
    display: inline-block;

}
.controls-group{
    position: relative;
    width: 124px;
    display: inline-block;
}
.module-button{
    width: 60px;
}

如果有人能告诉我如何解决这个问题，那将非常有用，谢谢

Answer 1

将vertical-align:middle;添加到.module-info和.module-controls-wrapper：

.module-info {
    display: table-cell;    
    vertical-align:middle;
    border: medium dashed #03F;
}

.module-controls-wrapper {
    display: table-cell;
    vertical-align:middle;
    border: medium solid #C00;
    text-align: center;
}

Demo Fiddle

Answer 2

将vertical-align：top添加到.module-info

Fiddle

.module-info {
    vertical-align: top;
    display: table-cell;    
    border: medium dashed #03F;
}