<div class="hm-cf">
  <div class="hm-cf-buttons">
    <div class="d-flex flex-column mb-3">
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Move up"><i class="fas fa-arrow-up"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Drag to reorder"><i class="fas fa-grip-lines"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Move down"><i class="fas fa-arrow-down"></i></a>
    </div>
    <div class="d-flex flex-column mt-auto">
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Duplicate"><i class="fas fa-clone"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-trash-alt"></i></a>
    </div>
  </div>
  <div class="hm-cf-body">
    <div class="input-group mb-2">
      <input type="text" class="form-control" placeholder="Question">
      <div class="input-group-append">
        <div class="hm-select mb-0">
          <select class="form-control pl-2">
            <option>Short Text</option>
            <option>Long Text</option>
            <option>Checkboxes</option>
            <option selected>Selection Menu</option>
            <option>Date</option>
            <option>Acceptance</option>
          </select>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-center mb-1">
      <div class="hm-checkbox m-0">
        <input type="checkbox">
        <label></label>
      </div>
      <input type="text" class="form-control form-control-sm font-size-100" placeholder="Answer">
      <a class="btn btn-link text-body btn-sm font-size-100" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-times"></i></a>
    </div>
    <div class="d-flex align-items-center mb-1">
      <div class="hm-checkbox m-0">
        <input type="checkbox">
        <label></label>
      </div>
      <input type="text" class="form-control form-control-sm font-size-100" placeholder="Answer">
      <a class="btn btn-link text-body btn-sm font-size-100" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-times"></i></a>
    </div>
    <div class="d-flex align-items-center mb-1">
      <div class="hm-checkbox m-0">
        <input type="checkbox">
        <label></label>
      </div>
      <input type="text" class="form-control form-control-sm font-size-100" placeholder="Answer">
      <a class="btn btn-link text-body btn-sm font-size-100" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-times"></i></a>
    </div>
    <div class="d-flex align-items-center mb-3">
      <div class="hm-checkbox m-0">
        <input type="checkbox">
        <label></label>
      </div>
      <a class="my-1" href="javascript:void(0);">Add option <i class="fas fa-sm fa-plus-circle"></i></a>
    </div>
    <div class="d-flex align-items-center">
      <div class="hm-checkbox hm-input-box hm-input-box-sm ml-auto">
        <input class="hm-input" type="checkbox" id="required1">
        <label class="hm-label" for="required1">Required</label>
      </div>
    </div>
  </div>
</div>

<div class="hm-cf">
  <div class="hm-cf-buttons">
    <div class="d-flex flex-column mb-3">
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Move up"><i class="fas fa-arrow-up"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Drag to reorder"><i class="fas fa-grip-lines"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Move down"><i class="fas fa-arrow-down"></i></a>
    </div>
    <div class="d-flex flex-column mt-auto">
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Duplicate"><i class="fas fa-clone"></i></a>
      <a href="#" class="btn btn-link btn-sm font-size-100 text-body" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fas fa-trash-alt"></i></a>
    </div>
  </div>
  <div class="hm-cf-body">
    <div class="form-row mb-2">
      <div class="col col-md-8">
        <div class="input-group mb-2">
          <input type="text" class="form-control" placeholder="Product Name">
          <div class="input-group-append">
            <div class="hm-select mb-0">
              <select class="form-control pl-2">
                <option>Short Text</option>
                <option>Long Text</option>
                <option>Checkboxes</option>
                <option>Selection Menu</option>
                <option>Date</option>
                <option>Acceptance</option>
                <option selected>Product</option>
              </select>
            </div>
          </div>
        </div>
        <textarea class="form-control" rows="3" placeholder="Description"></textarea>
      </div>
      <div class="col col-md-4">
        <div class="form-control p-0 h-100 bg-gray">
          <label class="d-flex flex-column align-items-center justify-content-center mb-0 h-100 element-interactive" for="img">
            <i class="fas fa-image fa-2x mb-2"></i>
            <strong>Add image <i class="fas fa-plus-circle"></i></strong>
          </label>
          <input class="d-none" type="file" id="img" name="img" accept="image/*">
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col col-md-4">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">€</span>
          </div>
          <input value="" class="form-control" placeholder="Price" inputmode="decimal">
        </div>
      </div>
       <div class="col col-md-8 d-flex align-items-center">
         <a data-toggle="collapse" href=".multi-collapse" data-target=".multi-collapse" aria-expanded="false">Setup limits</a>
      </div>
    </div>
    <div class="collapse pt-2 multi-collapse">
      <div class="bg-gray pt-2 pr-3 pb-3 pl-3 rounded-lg">
        <div class="form-row">
          <div class="form-group col col-md-4 mb-0">
            <label class="mb-0" for="">Maximum per order</label>
            <input placeholder="100" class="form-control form-control-sm" type="text">
          </div>
          <div class="form-group col col-md-4 mb-0">
            <label class="mb-0" for="">Available stock</label>
            <input placeholder="No limit" class="form-control form-control-sm" type="text">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>