непонятное поведение (изменение ширины) элемента в бустраповском

Использую React с Bootstrap (впрочем не важно, что React).

Потребовалось сделать карточку (элемент <Card>) в которой будет поле с диапазоном из двух дат, которые можно задать через 2 элемента<input />

Т.е. поле должно выглядеть так:

с <input /> по <input />

При этом сами элементы<input \> должны быть одинакового размера, а все поле шириной с <Card>

Решил сделать это через flex (наверное это можно сделать и классами bootstrap, но я его только начал изучать), получился код (пока без <input />:

<div className = "element-datepicker">
    <div className = "i1">с</div><div className = "i2">&nbsp;</div><div className = "i3">по</div><div className = "i4">&nbsp;</div>
</div>

получился такой объект, что замечательно, так и как задумывал (цвета нужны для оценки позиционирования):

Вот css код:

/* === стиль для получения даты === */
.ipc-element-datepicker {
    margin:                 0;
    padding:                0;

    width:                  100%;
    height:                 100%;

    display:                flex;
    flex-direction:         row;
    justify-content:        space-between;
    align-items:            center;

    box-sizing:             border-box;
}

.element-datepicker .i1, 
.element-datepicker .i2, 
.element-datepicker .i3, 
.element-datepicker .i4 {
    margin:                 0;
    padding:                0;
}

.element-datepicker .i1 {
    padding-right:          0.35rem;
    background:             orange;
}
.element-datepicker .i3 {
    padding:                0 0.35rem;
    background:             limegreen;
} 
.element-datepicker .i2,
.element-datepicker .i4 {
    height:                 100%;

    flex-grow:              1;

    background:             red;
}

Однако, когда внутрь полей i2 и i4 добавляю элементы <input />:

<div className = "element-datepicker">
    <div className = "i1">с</div><div className = "i2"><input type = 'test' name = 'date-s' /></div><div className = "i3">по</div><div className = "i4"><input type = 'test' name = 'date-f' /></div>
</div>

то ширина карточки резко увеличивается и я не могу понять почему так происходит и как с этим побороться

получается объект с большей шириной, чем задумывалось

Вот css код для <input />

.element-datepicker input {
    display:                inline-block;
    margin:                 0;
    padding:                0;

    width:                  100%;
    height:                 50%;

    border:                 1px solid black;
}

Подскажите пожалуйста как можно решить эту проблему