JSFiddle - React, Tailwind, and code Playground

HTML

<table>
		<tr>
				<th colspan="3">title text</th>
		</tr>
		<tr>
				<td>amount</td>
				<td class="pricing">price</td>
				<td class="purchase" rowspan="3">purchase button</td>
		</tr>
		<tr>
				<td>amount</td>
				<td class="pricing">price</td>
		</tr>
		<tr>
		  	<td>amount</td>
				<td class="pricing">price</td>
		</tr>
</table>

CSS

table{
	margin:.5em 0 1em 0;
	width:100%;
	font-size:15px;
}
table th{
	padding:0px 0 10px 5px;
}

table td{
	padding:2px 5px;
}

table td.purchase{
	text-align:right;
	width:150px;
	vertical-align:middle;
	background:#ffffff !important;
}
table td.pricing{
	width:130px;
	border-left:5px #ffffff solid;
}
table td.details {
	padding:0 35px 0 15px;
}

table tr:hover td
{
	background-color: #ebf1f6;
}