How to align form inputs - html

Question

What is the best way to align form inputs next to labels
without using a fixed label width, as this looks bad if the labels are much shorted then the specified length (especially when using a textarea in the same form, this looks very bad)
without using 2 columns (as inline div or table), one for labels and one for inputs, as this will break responsive layouts where label and input are on separate lines

Answer 1

Check this fiddle..Link
<label class="medium-inline">
Label
</label>
<div class="medium-inline">
<input type="text"/>
</div>
#media only screen and (min-width: 30em) {
.medium-inline{
display:inline;
}
}
#media only screen and (max-width: 30em) {
.medium-inline{
display:block;
}
}
All i did is change display property to inline and block respectively.

Answer 2

One way would be to make use of flexbox and to set flex:1 on the input to fill the remaining width of the container
Demo 1
NB: The above demo obeys the OP's constraint that no fixed width is set on the label.
If however min-width may be used on the label (corresponding to the longest label) then we can easily update the code to achieve a responsive / 2-column look:
Demo 2
.container {
width:80vw;
margin: 0 auto;
padding: 40px;
border: 1px solid black;
}
label {
display: inline-block;
padding: 8px 10px 0 0;
/* min-width: 150px; (for demo 2) */
}
p {
display: flex;
}
input {
-webkit-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
-moz-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
border: 0;
padding: 10px;
flex: 1;
}
<div class="container">
<form>
<p>
<label>*First Name</label>
<input type="text" />
</p>
<p>
<label>*Last Name</label>
<input type="text" />
</p>
<p>
<label>*Label3</label>
<input type="text" />
</p>
<p>
<label>Very very long label4</label>
<input type="text" />
</p>
</form>
</div>