Is there a way to create a group of labels that adjust their width based on the widest label without using tables in HTML or CSS? I need the input fields to shrink accordingly to fit the larger labels, as I deal with translations and cannot predict the width of each label.
Here is an example of what I'm looking for:
form {
display: table;
width: 100%;
}
label {
width: 1%;
display: table-cell;
white-space: nowrap;
padding-right: 1em;
}
input {
display: inline-block;
width: 100%;
}
.input-group {
display: table-row;
}
* {
line-height: 2em;
}
body {
padding: 2em;
}<form>
<div class="input-group">
<label for="name">Full name of your family and yourself</label>
<input type="text" id="name" name="name" placeholder="optional">
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="optional">
</div>
<div class="input-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" placeholder="optional">
</div>
</form>You can view this example on Codepen as well:
http://codepen.io/aboutandre/pen/bZRjqB
I am open to suggestions of a more elegant and efficient approach to achieve this layout without relying on tables. Any ideas?