JSFiddle - React, Tailwind, and code Playground

by KANDR101

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div class="card m-2" style="min-width: 21rem;">

  <div class="card-header bg-white text-primary">
    <h5>
      Vehicle Lookup
    </h5>
  </div>
  <div class="card-body pb-0">
  
    <form>
      <div class="row no-gutterss">
      
        <div class="form-group mb-0 col-12 col-sm-5">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text text-black-50 font-weight-bold" styleS="background-color: #88d6f3!important;">ID</span>
            </div>
            <input type="text" class="form-control" id="inputUID" placeholder="ex: abc123">
          </div>
        </div>
        
        <div class="form-group col-12 col-sm-auto px-0 mb-0">
          <div class="col-form-label d-flex"> <Span class="mx-auto font-italic text-black-50">OR</Span> </div>
        </div>   
        
        <div class="form-group col-12 col-sm">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text text-black-50 font-weight-bold" styleS="background-color: #88d6f3!important;">VEHICLE</span>
            </div>
            <input type="text" class="form-control" id="inputTruckNumber" placeholder="ex: 111111-111">
          </div>
        </div>
        
       ...

CSS

.w-auto {
  width: auto!important;
}

/* SM Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .w-sm-50 {
      width: 50%!important;
  }
  .w-sm-100 {
      width: 100%!important;
  }
  .w-sm-auto {
      width: auto!important;
  }
}

/* MD Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .w-md-50 {
      width: 50%!important;
  }
  .w-md-100 {
      width: 100%!important;
  }
  .w-md-auto {
      width: auto!important;
  }
}

/* LG Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .w-lg-50 {
      width: 50%!important;
  }
  .w-lg-100 {
      width: 100%!important;
  }
  .w-lg-auto {
      width: auto!important;
  }
}

/* XL Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

} */