Q:

Set a CSS style for inner item

Could you tell me how to apply css to the below mentioned item ? Thanks.
This is the Fiddle
Note : Just click the Edit button.After that it shows the date component.I need to reduce the height of that component.

I have tried as shown below.But it is not working :(
.editable-wrap editable-bsdate .editable-controls .input-group .form-control {
    height: 24px !important;
}

Update :
The html component is like this :
<td>
  <span editable-bsdate="comment.date" e-datepicker-popup="MM-dd-yyyy" e-ng-click="vm.open($event,'$data')" e-is-open="vm.opened.$data" e-name="date" e-form="commentForm">
     {{ comment.date | date:'MM-dd-yyyy' }}
   </span>
 </td>

A:

By adding this classes it works.
The component has padding which affect its size as well as the set height.
/* input */
.input-group input {
  padding: 2px;
  height: 26px;
}

/* input calender button */
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
  padding: 2px;
}

Updated fiddle

