Below is a snippet of the code I've been working on.
<body style="height: 100vh; margin: 0;
padding: 0; ">
<!-- Form Section
============================================= -->
<p>[wpshortcode1]</p>
<div class="container h-100 ">
<div class="row justify-content-center">
<form class="col-sm-6" method="POST" action="../categories/">
<div class="form-group mb-3">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control rounded" id="city" name="destinationCity" placeholder="City">
</div>
<div class="form-group mb-3 ">
<label for="state" class="control-label">State</label>
<div>
<select class="form-control" id="state" name="destinationState" placeholder="Please Choose">
<option value="">Please Choose</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
...
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="form-group mb-3">
<label for="postalcode">Zip Code</label>
<input type="text" name="destinationPostalCode" class="form-control rounded" id="postalcode" placeholder="Zip Code">
</div>
<button type="submit" class="btn btn-primary" value="Customer_Data" name="submitCustomerData">Submit</button>
</form>
</div>
<div class="row justify-content-center">
<div class="col-md-7">
<div class="mt-5">
<label for="response" class="form-label">Response Body:</label>
<textarea class="form-control rounded" id="response" rows="3"></textarea>
</div>
</div>
</div>
</div>
<!-- External JavaScripts
============================================= -->
<?php wp_footer(); ?>
</body>
</html>
I've attempted using align-middle as specified in the Bootstrap documentation on the container and child divs, but it hasn't worked. Since I'm not utilizing inline, inline-block, inline-table, and table cell elements, I thought align-items-center might do the trick, but unfortunately it hasn't.