JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td class="tdLeft">
<div class="innerDiv"> Stuff on column Stuff on column Stuff on column Stuff on column Stuff on column </div>
</td>
<td>
<div class="innerDiv">
Stuff on column
</div>
</td>
<td class="tdRight">
<div class="innerDiv">
Stuff on column
</div>
</td>
</tr>
<tr>
<td class="tdLeft">
<div class="innerDiv">
Stuff on column
</div>
</td>
<td>
<div class="innerDiv">
Stuff on column
</div>
</td>
<td class="tdRight">
<div class="innerDiv"> Stuff on column Stuff on column Stuff on column Stuff on column Stuff on column </div>
</td>
</tr>
<tr>
<td class="tdLeft">
<div class="innerDiv">
Stuff on column
</div>
</td>
<td>
<div class="innerDiv">
Stuff on column
</div>
</td>
<td class="tdRight">
<div class="innerDiv">
Stuff on column
</div>
</td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
margin: 20px;
}
td{
padding-top: 15px;
padding-bottom: 15px;
border-right: 2px dotted silver;
border-left: 2px dotted silver;
vertical-align: bottom;
width: 33%;
}
.tdLeft{
border-left: none;
}
.tdRight{
border-right: none;
}
.innerDiv{
border-bottom: 2px dotted silver;
padding-left: 20px;
padding-right: 20px;
height: 100%;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 20px;
}