Left Search

        
<div class="row mt-3 mb-2 align-items-center">
  <div class="col-md-6 input-group align-items-center customer-search">
     <div class="search-w-dropdown">
        <i class="icon-search"></i>
        <div class="input-group-prepend">
           <button type="button" class="btn btn-outline-secondary dropdown-toggle cust-dropdown" data-toggle="dropdown">
           <span class="mr-2">Customer Name</span> <i class="icon-arrow-bottom ml-auto"></i>
           </button>
           <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">Billing Type</a>
              <a class="dropdown-item" href="javascript:void(0)">Customer Name</a>
              <a class="dropdown-item" href="javascript:void(0)">Customer Number</a>
              <a class="dropdown-item" href="javascript:void(0)">Domain Name</a>
              <a class="dropdown-item" href="javascript:void(0)">Renew Date</a>
              <a class="dropdown-item" href="javascript:void(0)">Renew Status</a>
              <a class="dropdown-item" href="javascript:void(0)">Subscription ID</a>
              <a class="dropdown-item" href="javascript:void(0)">Subscription Name</a>
              <a class="dropdown-item" href="javascript:void(0)">Vendor Contract #</a>
              <a class="dropdown-item" href="javascript:void(0)">Vendor Name</a>
           </div>
        </div>
        <span class="border-mid-sep">|</span>
        <input type="text" class="form-control cust-input-search search-category " placeholder="Search">
     </div>
  </div>
  <div class="col-auto pl-0">
     <a class="refine-link refineInFilter" href="javascript:void(0);"><i class="icon-refine"></i> <span class="ml-1 ">Refine</span></a>
  </div>
  <span class="col-auto dropdown sort-filter ml-auto">
     <span class="mx-2">Sort by: <i class="icon-sort-arrow" data-toggle="tooltip"  ><span class="path1"></span><span class="path2"></span></i></span>
     <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class=""> <span class="link-text" >Customer Name</span> <i class="icon-arrow-bottom ml-2"></i> </a>
     <div class="dropdown-menu">
        <ul class="sub-dropdown-menu pl-0">
           <li><a href="javascript:void(0)" class="dropdown-item"><span>Customer Name</span></a></li>
           <li><a href="javascript:void(0)" class="dropdown-item"><span>Favorites</span></a></li>
           <li><a href="javascript:void(0)" class="dropdown-item"><span>Contract Number</span></a></li>
        </ul>
     </div>
  </span>
</div>