JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col pt-5">

      <h3>Form 1 (with <em>.col-form-label</em>)</h3>
      <form>
        <div class="form-group row">
          <label for="formGroupExampleInput" class="col-3 col-form-label">Example label</label>
          <div class="col">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
          </div>
        </div>
        <div class="form-group row">
          <label for="formGroupExampleInput2" class="col-3 col-form-label">Another label</label>
          <div class="col">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </div>
        <div class="form-group row">
          <label for="formGroupExampleInput2" class="col-3 col-form-label">Another label</label>
          <div class="col">
            <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
          </div>
        </div>
      </form>

      <br/>

      <h3>Form 2 (without <em>.col-form-label</em>)</h3>
      <form>
        <div class="form-group row">
          <label for="formGroupExampleInput" class="col-3">Example label</label>
          <div class="col">
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
          </div>
        </div>
        <div class="form-group row">
          <label for="formGroupExampleInput2" class="col-3">Another label</label>
          <div class="col">
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
          </div>
        </div>
        <div class="form-group row">
          <label for="formGroupExampleInput2" class="col-3...