JSFiddle - React, Tailwind, and code Playground
HTML
<table cellspacing="0">
<tr>
<td>Row 1</td>
<td><button>Button 1</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button>Button 2</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button>Button 3</button></td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Row 1B</div>
<div class="td"><button>Button 1B</button></div>
</div>
<div class="tr">
<div class="td">Row 2B</div>
<div class="td"><button>Button 2B</button></div>
</div>
<div class="tr">
<div class="td">Row 3B</div>
<div class="td"><button>Button 3B</button></div>
</div>
</div>
<div>
<div class="div">
<div>Row 1C</div>
<div><button>Button 1C</button></div>
</div>
<div class="div">
<div>Row 2C</div>
<div><button>Button 2C</button></div>
</div>
<div class="div">
<div>Row 3C</div>
<div><button>Button 3C</button></div>
</div>
</div>
CSS
table, tr, td, .div {
/* Try to contain absolutely positioned elements */
position:relative;
}
button {
position:absolute;
top:0;
right:0;
}
.table {
display:table;
}
.tr {
display:table-row;
}
.td {
display:table-cell;
}
/* Non essential styles */
.div, td, .td {
background:#cde;
border-bottom:1px solid #ccc;
padding:1em;
}