Align 3 inputs in the same row with label above - html

Question

I have a small issue here with aligning three input fields in the same row with equal space between each other.
I tried to do it with display: flex and space-between but then the label is placed left to the input and not on-top.
What I want to achieve is as followed:
Then if there is more inputs I want it to "break a row" and start a new 3 input row.
How can I achieve it ?
Code snippet:
/*Stage 3 input group*/
.dInput{
margin-top: 15px;
}
.dInput label {
display: block;
padding: 6px;
color: #f8f9fa;
}
.dInput input {
padding: 5px;
margin-left: 5px;
width: 33%;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
<label for="name">Username*</label>
<input type="text" id="name">
<label for="name">Username*</label>
<input type="text" id="name">
</div>

Answer 1

I think this is what you want. I hope my code is helpful to you.
/*Stage 3 input group*/
.dInput{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin-top: 15px;
}
.dInput label {
text-align:center;
display: block;
padding: 6px;
color: #000;
}
.dInput input {
padding: 5px;
margin-left: 5px;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput" v-if="activeStage == 3">
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
</div>
<div class="dInput" v-if="activeStage == 3">
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
<div><label for="name">Username*</label>
<input type="text" id="name"></div>
</div>

Answer 2

display: flex implementation
.dInput {
margin-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.input-wrapper {
display: flex;
flex-direction: column;
max-width: 33%;
flex: 33%;
}
.dInput label {
display: block;
padding: 6px;
/* color: #f8f9fa; */
}
.dInput input {
padding: 5px;
margin-left: 5px;
width: 33%;
background-color: #495057;
border-radius: 4px;
}
<div class="dInput">
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="input-wrapper">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>

Answer 3

With css grid :
/*Stage 3 input group*/
.dInput{
margin-top: 15px;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
justify-content: space-between;
justify-items: center;
background-color: violet;
gap: 1em;
padding: 1em;
}
.dInput label {
display: block;
color: #f8f9fa;
}
.dInput input {
padding: 5px;
background-color: #495057;
border-radius: 4px;
max-width: 8em;
margin-top: 1em;
}
.dInput-item {
justify-self: center;
text-align: center;
}
<div class="dInput" v-if="activeStage == 3">
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div class="dInput-item">
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>

Answer 4

Wrap each label and input in a div
<div class="dInput">
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Username*</label>
<input type="text" id="name">
</div>
</div>
css:
.dInput{
margin-top: 15px;
display:flex;
justify-content: space-between;
}