FAST Forms

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-3">
      <label for="dropDown">Field Label</label>
      <select id="dropDown" name="dropDown" class="">
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-3">
      <label for="textBox1" class="required">Required Item - this is a sample of a longer title</label>
      <input type="text" id="textBox1" name="textBox1" class="" />
      <span id="termsError" class="error-box">Error</span>
    </div>
    <div class="col-3">
      <label for="textBox3">Numeric Input (disabled)</label>
      <input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" class="align-right">
      <span id="termsError" class="warning-box">Warning</span>
     </div>
    <div class="col-3">
      <label for="textBox4">Date Picker</label>
      <input type="date" id="textBox4" name="textBox4" class="" />
      <span id="termsError" class="info-box">Info</span>
    </div>
  </div> 
</div>

CSS

.row {
  margin-top: 20px;
}

.col {
  padding: 10px;
}
label, .label {
    display: block;
}

label.inline, .label.inline {
        display: inline-block;
}
.error-box {
    background-color: var(--fast-color-light);
    color: var(--fast-color-error);
    border-radius: var(--fast-border-radius);
    font-size: var(--fast-font-size-small);
    letter-spacing: normal;
    white-space: normal;
    font-weight: normal;
    padding: var(--fast-padding-thin);
    border: 1px solid;
    margin-top: .25rem;
    display: table;
}

.warning-box {
    background-color: var(--fast-color-light);
    color: var(--fast-color-warning);
    border-radius: var(--fast-border-radius);
    font-size: var(--fast-font-size-small);
    letter-spacing: normal;
    white-space: normal;
    font-weight: normal;
    padding: var(--fast-padding-thin);
    border: 1px solid;
    margin-top: .25rem;
    display: table;
}

.info-box {
    background-color: var(--fast-color-light);
    color: var(--fast-color-info);
    border-radius: var(--fast-border-radius);
    font-size: var(--fast-font-size-small);
    letter-spacing: normal;
    white-space: normal;
    font-weight: normal;
    padding: var(--fast-padding-thin);
    border: 1px solid;
    margin-top: .25rem;
    display: table;
}

.blue-box {
    white-space: normal;
    background-color: var(--fast-color-light);
    color: var(--fast-color-dark);
    padding: var(--fast-padding-thin);
    border: 1px solid var(--fast-color-info);
    border-radius: var(--fast-border-radius);
    font-size: var(--fast-font-size-small);
    margin-top: .25rem;
}

.notice-box {
    white-space: normal;
    background-color: var(--fast-color-light);
    color: var(--fast-color-info);
    font-weight: bold;
    padding: var(--fast-padding-thin);
    border: 2px solid;
    border-radius: var(--fast-border-radius);
    font-size: var(--fast-font-size-large);
    text-align: center;
    margin: .25rem;
}

.notification-container {
    color:...

JavaScript

$(window).on("load resize",function(){
$('label').height('');
var heights = $("label").map(function() {
        return $(this).height();
    }).get();
    
    maxHeight = Math.max.apply(null, heights);
    
    $("label").css("height", maxHeight);
});