MrBuggy MrBuggy - 3 months ago 7
HTML Question

Align label and inputs vertical



.wrapper {
display: flex;
flex-direction: column;
}
.group {
display: flex;
width: 300px;
justify-content: space-between;
margin-bottom: 10px;
}
.small {
width: 60px;
}

<div class="wrapper">
<div class="group">
<label>From</label>
<input>
<input class="small">
</div>
<div class="group">
<label>To</label>
<input>
<input class="small">
</div>
</div>





How can I align this so that it looks like this:

enter image description here

At the moment, the first label is longer than the second and it's not aligned correctly. How can I fix this? Thanks

Answer

Set a fixed width to label:

.wrapper {
  display: flex;
  flex-direction: column;
}
.group {
  display: flex;
  width: 300px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.small {
  width: 60px;
}

label{
  width: 60px; 
}
<div class="wrapper">
  <div class="group">
    <label>From</label>
    <input>
    <input class="small">
  </div>
  <div class="group">
    <label>To</label>
    <input>
    <input class="small">
  </div>
</div>

Comments