JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <h3>Patient Information</h3>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <fieldset>
        <legend></legend>
        <div class="row">
          <div class="col-2">
            <label>Name:</label>
          </div>
          <div class="col-10">
            <label id="lblNameFullFormatted"></label>
          </div>
        </div>
        <div class="row">
          <div class="col-2">
            <label>Previous Name:</label>
          </div>
          <div class="col-3">
            <label id="lblPreviousName"></label>
          </div>
          <div class="col-2">
            <label>Marital Status:</label>
          </div>
          <div class="col-5">
            <label id="lblMaritalStatus"></label>
          </div>
        </div>
        <div class="row">
          <div class="col-2">
            <label>DOB:</label>
          </div>
          <div class="col-3">
            <label id="lblDOB"></label>
          </div>
          <div class="col-2">
            <label>Age:</label>
          </div>
          <div class="col-5">
            <label id="lblAge"></label>
          </div>
        </div>
        <div class="row">
          <div class="col-2">
            <label>Gender:</label>
          </div>
          <div class="col-3">
            <label id="lblGender"></label>
          </div>
          <div class="col-2">
            <label>Race:</label>
          </div>
          <div class="col-5">
           ...

CSS

/* .row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
} */

body {
  line-height: 0.8;
}

h3 {
  font-size: 22px;
  font-weight: bold;
  text-decoration: underline;
}

legend {
  font-size: 18px;
  font-weight: bold;
}

label {
  font-size: 15px;
}

.mtop10 {
  margin-top: 10px;
}