Не получаетсяj сделать человеческий input с картинкой

Всем привет.
Я не верстальщик и поэтому столкнулся с непреодолимой проблемой! Мучаюсь уже второй день.
Пишу очередной плагин календаря и мне нужно превратить input поле в input поле с кликабельной кратинкой обёрнутое окантовкой.

На входе:
Номер: <input type=text value="обычное поле которое нельзя менять">, дата: <input type=text value="к этому хочу картинку"><br>

Делаю так:
https://fiddle.jshell.net/c981h9aq/5/

но всё разъезжается вертикально не согласутеся.
Помогите. Перепробовал уже кучу всего, и в таблицу совал, и в дивы и display block,float-block, этот долбаный input или img всегда вертикально прыгают или не согласуюся с обычным input'ом (который первый) или снизу появляется какой-то промежуток из ниоткуда!

 

Если я правильно вас понял то сделайте картинку бэграундом.
Ну как-то так)

Код:

#input2 {
    padding-right: 25%;
    width: 50px;
    height: 15px;
    background: url('img.png') no-repeat center right;
}

 

spy, тогда она будет некликабельной

 

тогда делай так как и все календари

Код:

<divclass="form-field">
            <input type="text" name="date" value="2017-05-05">
            <span class="icon-date"></span>
           </div>

в class="icon-date" картинку бекграундом и js клик привяжи.
А воoбще, зачем велосипеды?) уже есть готовый виджет jQuery UI - Datepicker