Почему блоки не стоят на одной линии?

Рядом с полем для ввода даты я хочу расположить кнопку (div). Но по непонятной причине кнопка-div смещена выше.
Почему блоки не стоят на одной линии и как это исправить?
PS
Два дива i_left_arrow_button_1_in ui_left_arrow_button_1_out т.к. при clip-path: polygon граница отображается на краях этого полигона. для неё нужна div-обертка

https://jsfiddle.net/9vxe6otL/1/

<a href="#"><div class="ui_left_arrow_button_1_out"><div class="ui_left_arrow_button_1_in"></div></div></a>
<input type="text" name="date_begin" size="20" class="ui_datapicker_1 datapicker_from_10_years_past_to_now " value="01.01.2018">

/* Кнопка со стрелкой влево */ 
 .ui_left_arrow_button_1_out
{
width:26px;
height:26px;
border: 1px solid #383838;
display: inline-block;
}
.ui_left_arrow_button_1_in
{
width:26px;
height:26px;
background: red;
content:'';
clip-path: polygon(0 34%, 50% 80%, 100% 34%, 80% 34%, 50% 60%, 20% 34%);

}

 
 
/* Общий вид поля для ввода даты */
.ui_datapicker_1
{
display: inline-block;
width:90px;
height:18px;
padding-left:2px;
padding: 4px;
background: #181E27;
border: 1px solid #383838;
color: #CDCFD2;
font-family: Arial;
font-size: .875rem;
outline:none;
transition-property: background,border;
transition-duration: 200ms;
transition-timing-function: ease;
transition-delay: 0s;
}
.ui_datapicker_1:hover {
border: 1px solid #44484E;
background: #0E1015;
color: #ffffff;
}
.ui_datapicker_1:focus {
border: 1px solid #1E5F99;
background: #0B0D11;
color: #ffffff;
}