space remaining inside my MaskedInput despite margin=0, padding=0 and width=auto

[Hocoh]

here the demo https://stackblitz.com/edit/react-gunzft?file=index.js.

Why MaskedInput want to put some space at the end of the element? With standard's input the width fit to the content in this configuration.

Here m ReactJS snippet:

<MaskedInput 
                    class="date"
                    mask="11-11-1111" 
                    name="date" 
                    size="10" 
          value={this.state.date}
                    placeholder="dd-mm-yyyy" 
                    onChange={this.handleChange}
        />

here my CSS' snippet:

.date{
    height:4.5vh;
    text-align:left;
    font-size:1.05em;
    width:auto;
        margin:0;
        padding:0;
}

How can I use MaskedInput so it fit my content?