JSFiddle - React, Tailwind, and code Playground

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">
          <form class="needs-validation" action="submit_gene_entry.php" method="post">
            <div class="row ">
              <div class="col-xs-2 mb-3 v-center">
                <label for="geneLetters_postvar" style="padding-top: 5px; padding-right: 5px;">Gene name</label>
              </div>
              <div class="col-xs-1 mb-3">
                <p class="input-group" >
                  <input name=geneLetters_postvar type=text  pattern="[a-z]{1,3}" class="form-control" placeholder="gene letters" required autofocus title="letters of the gene name">
                </p>
              </div>
              <div class="col-xs-1 mb-3 text-center">
                <label for="geneNumbers_postvar" style="padding-top: 5px; padding-right: 5px; padding-left: 5px;">-</label>
              </div>
              <div class="col-xs-2 mb-3">
                <p class="input-group" >
                  <input name=geneNumbers_postvar type=text style="width:50%" pattern="[0-9]{1,6}" class="form-control" placeholder="gene numbers" title="numbers only" required>
    			      </p>
    		      </div>
            </div>
          </form>
 </body>

CSS

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

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