JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<form class="row g-1 cna-form">
  <div class="row col-md-5 g-2">
    <div class="col-md-12">
      <label for="inputEmail4" class="form-label">Park Name:</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="col-md-12 txtArea">
      <label for="inputAddress" class="form-label">Location of Park:</label>
      <textarea name="roleExplanation"></textarea>
    </div>
    <div class="col-12">
      <label for="inputAddress" class="form-label">Inspected By:</label>
      <input type="text" class="form-control" id="inputAddress">
    </div>

    <div class="col-md-6">
      <label for="inputCity" class="form-label">Inspection Date:</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Wall Surface Area:</label>
      <input type="text" class="form-control" id="inputCity2">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Maximum Wall Height:</label>
      <input type="text" class="form-control" id="inputCity3">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Maximum Surface Area:</label>
      <input type="text" class="form-control" id="inputCity4">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Wall Length:</label>
      <input type="text" class="form-control" id="inputCity5">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Wall Thickness:</label>
      <input type="text" class="form-control" id="inputCity6">
    </div>
    <div class="col-md-6">
      <label for="inputCity" class="form-label">Property Above:</label>
      <input type="text" class="form-control"...

CSS

.Xpark-cna-form .input-group-text {
  display: flex;
  align-items: center;
  width: 174px;
  white-space: normal;
  text-align: left;
}