My custom content box styling is causing some issues for me. Inside the content box, there are several label and input fields. The box itself has a set width of `500px.
The challenge is that some of the labels are longer than others, but I want the input fields to always stretch out to fit the window size with a bit of white space around them.
This is the current HTML structure:
<div class="content">
<div class="row">
<label for="test1">This is a test #1</label>
<input type="text" name="test1">
</div>
<div class="row">
<label for="test2">This is a test #2</label>
<input type="text" name="test2">
</div>
<div class="row">
<label for="test3">But this is a test with a much longer label</label>
<input type="text" name="test3">
</div>
</div>
And here's the CSS code:
.content {
border: 1px solid #000;
width: 500px;
height: 500px;
}
.row {
margin-top: 5px;
}
input {
width: 385px;
}
You can view the issue in action on this fiddle: https://jsfiddle.net/4ga3533o/. The first two rows display correctly, but in the third row, the input field drops below the label because it exceeds the width of the content box. How can I adjust the setup so that labels can vary in length while the input fields only take up remaining width?