JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<body>

<div class="containerPage">
	<div class="containerMeeting">
		<div class="borderHEADINGOuter">
			<div class="borderHEADINGInner">
				<table class="tableHEADING">
					<colgroup>
						<col width="50%" /><col width="50%" />
					</colgroup>
					<tr>
						<td class="textCongregation">CONGREGATION NAME</td>
						<td class="textTitle">Midweek Meeting Schedule</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>

</body>

CSS

table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
table th, td {
	/* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	background: #666;
}
.containerPage {
	min-width: 210mm;
	max-width: 210mm;
	padding-left: 2mm;
	padding-right: 2mm;
	margin-left: auto;
	margin-right: auto;
	background: #FFF;
}
.containerMeeting {
	margin-bottom: 5mm;
}
.floatRight {
	color: gray;
	padding-top: 1mm;
	padding-bottom: 1mm;
	padding-right: 2mm;
	float: right;
	text-align: right;
	font-size: 8pt;
	font-weight: 700;
	text-transform: none;
}
.borderHEADINGOuter {
	border-bottom: 1px gray solid;
	margin-bottom: 5mm;
}
.borderHEADINGInner {
	border-bottom: 4px gray solid;
	margin-bottom: 2px;
}
.tableHEADING {
	width: 100%;
	border: none;
}
.tableHEADING td {
	border: none;
}
.textCongregation {
	vertical-align: bottom;
	text-align: left;
	font-size: 11pt;
	font-weight: 700;
	text-transform: uppercase;
}
.textTitle {
	vertical-align: bottom;
	text-align: right;
	font-size: 18pt;
	font-weight: 700;
}