JSFiddle - React, Tailwind, and code Playground

by Nate Armstrong

HTML

<div class="pt-3 row">
	<div class="col-12">
		<h2>Undergraduate Retention and Graduation Rate Cohort</h2>
	</div>
</div>

<div class="pt-3 row">
	<div class="border col-12 d-flex">
		<div class="flex-grow-1 p-2">First-time, full-time bachelor’s seeking student retention rate</div>

		<div class="p-2">65%</div>
	</div>

	<div class="border col-12 d-flex">
		<div class="flex-grow-1 p-2">First-time, part-time bachelor’s seeking student retention rate</div>

		<div class="p-2">N/A</div>
	</div>

	<div class="border col-12 d-flex">
		<div class="flex-grow-1 p-2">Graduation rate cohort as percent of total entering students</div>

		<div class="p-2">21%</div>
	</div>
</div>

<div class="pt-3 row">
	<div class="col-12">
		<h2>Graduate Student Characteristics</h2>
	</div>

	<div class="border col-12 d-flex">
		<div class="flex-grow-1 p-2">Percent of graduate students who are female</div>

		<div class="p-2">47%</div>
	</div>

	<div class="border col-12 d-flex">
		<div class="flex-grow-1 p-2">Percent of graduate students who are full-time</div>

		<div class="p-2">75%</div>
	</div>
</div>
</div>