Ionic v4: how to change some css of inner class input-wrapper of ion-item?

I would like to get 3 input fields in line in same ion-item and under a single common floating label such as :
but instead I have this:
due to the display: flex css attribute in input-wrapper from shadow DOM of ion-item component :

I’d like to be able to change it to inline but I can’t find the way

any help around ?

FYI the code is :

        <ion-label position="floating">Date of birth</ion-label>
        <ion-input class="day" value="{{day}}" formControlName="day" placeholder=Day"></ion-input>
        <ion-input class="month" value="{{month}}" formControlName="month" placeholder=Month"></ion-input>
        <ion-input class="year" value="{{year}}" formControlName="year" placeholder="Year"></ion-input>

.day, .month {
display: inline-block;
width: 80px;
.year {
display: inline-block;
width: 170px;

1 Like

I would suggest some other structure, because I don’t believe <ion-item> enjoys having multiple children who are interested in interaction.