Wie kann man eine Gruppe von Labels zusammenwachsen lassen und die Eingabefelder verkleinern?

Question

Ich möchte eine Gruppe von Etiketten haben, die so viel horizontalen Platz wie das breiteste Etikett nehmen und gleichzeitig alle Eingabefelder verkleinern sollten, um die größeren Etiketten aufzunehmen. Ich brauche das, da ich mit Übersetzungen zu tun habe und mir nicht sicher sein kann, wie breit ein bestimmtes Label sein wird.

Etwas wie folgt aus:

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>

Sie können dies auch in Codepen überprüfen:

http://codepen.io/aboutandre/pen/bZRjqB

Aber ist es ein eleganter Weg, dies zu tun, dass ist generischer und beinhaltet keine Tabellen (sei es HTML oder CSS)?

Answer 1

Wie wäre es, die Breite der Eingabefelder anzugeben, die vom gewünschten/bestimmenden Eingabefeld erben? Also zum Beispiel, wenn das Namensfeld die Determinante ist, make, dass eine Breite von 100% und und die anderen zwei Elemente haben - width: inherit;