使用display的正确方法：table-column

Question

我正在观看CSS属性“display”的不同选项，并且正在尝试display : table-...，一切正常但我在使用display : table-column和display : table-column-group时遇到了一些麻烦不显示任何其他选项让我的div显示。 我真的不知道如何使用表格显示。

这是我的代码

<div class="wrapper">
    <div class="zi-1 zone-info">TEXT1</div>
    <div class="zi-2 zone-info">TEXT2</div>
</div>

.wrapper { display: table }

.zone-info {
    display: table-column-group;
}

.zi-1 {
    background-color:yellow;
}

.zi-2 {
    background-color:magenta;
}

JSFiddle

问题

使用table-column选项的正确方法是什么