<div class="p-3">

  <div class="row g-2">

    <div class="col-6">

      <label for="start-date-input" class="form-label">Start Date</label>

      <div class="form-outline datepicker" data-mdb-format="yyyy-mm-dd">

        <input type="text"

               class="form-control"

               id="start-date-input" />

      </div>

    </div>

    <div class="col-6">

      <label for="end-date-input" class="form-label">End Date</label>

      <div class="form-outline datepicker" data-mdb-format="yyyy-mm-dd">

        <input type="text"

               class="form-control"

               id="end-date-input" />

      </div>

    </div>

    <div class="col-6">

      <label for="start-time-input" class="form-label" >Start Time</label>

      <div class="form-outline timepicker" data-mdb-enable-validation="false">

        <input type="text" class="form-control" id="start-time-input" />

      </div>

    </div>

    <div class="col-6">

      <label for="end-time-input" class="form-label">End Time</label>

      <div class="form-outline timepicker" data-mdb-enable-validation="false">

        <input type="text" class="form-control" id="end-time-input" />

      </div>

    </div>

    <div class="col-6">

      <label for="input-email" class="form-label">Email</label>

      <input type="email" class="form-control" id="input-email">

    </div>

  </div>

</div>

​