Div element with display table-column is not visible

Question

.table             { display: table;        }
.table > div       { display: table-column; }
.table > div > div { display: table-cell;   }

<div class="table">
  <div>
    <div>Hello</div>
    <div>Just</div>
  </div>
  <div>
    <div>World!</div>
    <div>Testing</div>
  </div>
</div>

The table is not visible here. But when I change table-column to table-row, it suddenly becomes visible:

.table             { display: table;        }
.table > div       { display: table-row;    }
.table > div > div { display: table-cell;   }

<div class="table">
  <div>
    <div>Hello</div>
    <div>Just</div>
  </div>
  <div>
    <div>World!</div>
    <div>Testing</div>
  </div>
</div>

How to make the first snippet work without using the <table> element? I am on Chrome.