Untitled

<div class="row">
        <div class="card combine-square-report-filter">
          <div class="row d-flex flex-column flex-lg-row">
            <div  class="col-auto d-flex">
    
              <label class="rad-label rad-label-background">
                <input type="radio" class="rad-input" name="rad" value="all" checked>
                <div class="rad-design"></div>
                <p class="rad-text">All Clients</p>
              </label>

              <label class="rad-label">
                <input type="radio" class="rad-input" name="rad" value="client">
                <div class="rad-design"></div>
                <p class="rad-text">Client</p>
              </label>
          </div>
              <div class="col-auto d-flex flex-column flex-lg-row gap-3">
            <div style="display: flex; flex-direction: column;" class="clientCodeTextDiv hide">
              <label for="" class="form-label fw-semibold">Select Client code</label>
                <input type="text" placeholder="Enter client code" onkeyup="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);" class="clientCodeText">
            </div>
            <div style="display: flex; flex-direction: column;">
              <label for="" class="form-label fw-semibold">Date range</label>
              <input type="date" name="daterange" value="" id="datepicker" />
            </div>
          </div>
    
          <div class="col-auto d-flex justify-content-center">
            <button class="custom-primary-btn mt-4">Submit</button>
          </div>
        </div>
      </div>
    </div>