JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<table cellspacing=0>
  <tr>
    <td class="join">foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>baz</td>
    <td>quux</td>
    
  </tr>
</table>

CSS

* {
  box-sizing: border-box;
}

td {
  border-left: 1px solid black;
  border-top: 1px solid black;
  margin: 0;
}

tr:last-of-type td {
    border-bottom: 1px solid black;
}

td:last-of-type {
  border-right: 1px solid black;
}

td {
  padding: 0.5em;
}

td.join {
  position: relative;
}
td.join::after {
  display: block;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 100%;
  width: 1px;
  background: white;
  height: 100%;
}