Align 3 inputs in the same row with label above

Issue

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>

Solution

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>

Answered By – mr.Hritik

Answer Checked By – Timothy Miller (AngularFixing Admin)

Issue

Solution

Leave a Reply Cancel reply