input text field is not same with its contained icons

Question

Here is the input field of my form:

its functioning well but not displaying correctly

Here is my code:

<div class="form-group">
        <label for="datepicker">Expire Date</label>
        <div class="form-group">
            <div class="input-group date-select-with-expire-option">
                <div class="input-group-prepend">
                    <span class="input-group-text"> <i
                        class="far fa-calendar-alt"></i>
                    </span>
                </div>
                <input type="text" class="form-control date-input"
                    name="SelectedDate" placeholder="Select date" />
                <div class="input-group-append">
                    <div class="input-group-text">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input expire-option"
                                name="DateNeverExpires" id="never-expired"> <label
                                class="custom-control-label" for="never-expired"> Never
                                expires </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here the same code in jsFiddle working fine. but not on my page

I don't know where I am making mistake.

Thanks in anticipation

Answer 1

margin property is adding margin at the top, removing it will solve your problem.

input[type=text], select {
  width: 100%;
  padding: 12px 20px;

  /* margin: 8px 0; */ # Remove this

  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

Check at JsFiddle