CODEWITHSUNDEEP
htmlcssflexbox
webta.st.ic
webta.st.ic

Reputation: 5179

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

Upvotes: 0

Views: 67

Answers (3)

user6760336
user6760336

Reputation:

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; 
}

Upvotes: 1

Aravind
Aravind

Reputation: 41571

I guess this will be enough instead of that 

.small {
  width: 60px;
}
<table>
<tr>
<td><label>From</label></td>
<td> <input> <input class="small"></td>
<tr>
<td> <label>To</label></td>
<td>  <input> <input class="small"></td>
</tr>
</table>

Upvotes: 0

Sergio Tx
Sergio Tx

Reputation: 3868

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>

Upvotes: 2

Related Questions