In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element with varying height?
<!DOCTYPE html5>
<html>
<head>
<style>
div.a {
flex:1 1;
}
div.b {
flex:1 1;
}
div.form {
/*display: table;*/
width: 100%;
}
div.form div {
display: table-row;
width: 100%;
}
div.form div label {
display: table-cell;
text-align: right;
padding-right: 5px;
}
div.form div input {
width: 100%;
}
</style>
</head>
<body>
<div style="display:flex">
<div class="a">
<div class="form">
<div>
<label>a</label>
<input/>
</div>
<div>
<label>askldak asd ls</label>
<input/>
</div>
<div>
<label>askldakasda asdls</label>
<input/>
</div>
</div>
</div>
<div class="b">b</div>
</div>
</body>
</html>
Edit 1
Check out this image from the second post
After attempting to implement the provided example, I noticed that the labels did not align correctly as expected.