<body>
    <table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
    </table>
    <div class="table">
        <div class="table-row">
            <div class="left table-cell">
                左
            </div>
            <div class="right table-cell">
                右
            </div>
        </div>
    </div>
</body>
.left{
  background:red;
  width: 20%;
}
.right{
  background:blue;
}
table{
  width:800px;
  height:200px;
  border-collapse: collapse;
}
.table{
  margin-top:20px;
  display: table;
  width:800px;
  height:200px;
}
.table-row{
  display: table-row;
}
.table-cell{
  vertical-align: center;
  display: table-cell;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.