MrBuggy MrBuggy - 5 months ago 9
HTML Question

flush/align label and input with each other

I have follow code:



.groups {
display: flex;
width: 100%;
}

.group {
display: flex;
flex-direction: column;
}

<div class="groups">
<div class="group">
<label>Frist given name
<input type="text">
</label>

<label>Surname
<input type="text">
</label>

<label>City
<input type="text">
</label>
</div>

<div class="group">
<label>Text 1
<input type="text">
</label>

<label>Bla bla bla
<input type="text">
</label>

<label>My dummy-label
<input type="text">
</label>
</div>

<div class="group">
<label>Hello, I'm a label
<input type="text">
</label>

<label>Labelname
<input type="text">
</label>

<label>Test-label
<input type="text">
</label>
</div>
</div>





I would like to flush labels and inputs with each other (label on the left side of the input with same space) like in this picture:

enter image description here

How can I do this on a nice, smart way?

Thanks & cheers.

Answer

Here is your answer in fiddle https://jsfiddle.net/sesn/bq3gjeug/

CSS:

.groups {
  display: flex;
  width: 100%;
}

.group {
  display: flex;
  flex-direction: column;
  margin-right:20px;
}
.group:last-child { margin-right: 0px; }
.group label { display: block; min-width: 100px;  font-size: 12px; margin-bottom: 5px; }
.group input { max-width: 100px; float: right;margin-left: 10px;}