Align Etikett und Eingänge vertikale

Question

.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>

Wie kann ich das so ausrichten, dass sie wie folgt aussieht:

Im Moment das erste Etikett ist länger als die zweite und es ist nicht richtig ausgerichtet. Wie kann ich das beheben? Dank

Answer 1

eine feste Breite einstellen zu beschriften:

.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>

Answer 2

ich denke, das wird anstelle des

.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>

Answer 3

Set genug sein, eine feste Breite zu beschriften:

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

label{ 
    width: 60px; 
}