Edit in JSFiddle

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      hoge
      <span class="left top"></span>
      <span class="right top"></span>
      <span class="right bottom"></span>
      <span class="left bottom"></span>
    </div>
    <div class="table-cell">
      hogehoge
      <span class="left top"></span>
      <span class="right top"></span>
      <span class="right bottom"></span>
      <span class="left bottom"></span>
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      hogehoge
      <span class="left top"></span>
      <span class="right top"></span>
      <span class="right bottom"></span>
      <span class="left bottom"></span>
    </div>
    <div class="table-cell">
      hoge
      <span class="left top"></span>
      <span class="right top"></span>
      <span class="right bottom"></span>
      <span class="left bottom"></span>
    </div>
  </div>
</div>

.table {
  display: table;
  margin: 50px auto;
  border: black 1px solid;
  border-collapse: collapse;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  position: relative;
  padding: 30px;
  border: black 1px solid;
}
.table-cell span{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: tomato;
}
.table-cell .left{
  left: 0;
}
.table-cell .right{
  right: 0;
}
.table-cell .top{
  top: 0;
}
.table-cell .bottom{
  bottom: 0;
}