JSFiddle - React, Tailwind, and code Playground

by kboucher

HTML

<table>

	<!-- Adjust columns here -->
	<colgroup>
	    <col style="width: 60%">
	    <col style="width: 20%">
	    <col style="width: 20%">
	</colgroup>

	<tr>
	    <th>Charge</th>
	    <th colspan="2">Price</th>
	</tr>

	<!-- Repeating rows -->
	<tr>
		<td>[Description]</td>
		<td colspan="2">[Amount]</td>
	</tr>

	<!-- Total rows -->
	<tr>
		<td>&nbsp;</td>
		<td class="label">Subtotal</td>
		<td>[Amount]</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td class="label">Total</td>
		<td>[Amount]</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td class="label">Amount Paid</td>
		<td>[Amount]</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td class="label">Balance Due</td>
		<td>[Amount]</td>
	</tr>

</table>

CSS

th { text-align center; }
td.label { text-align: right; }