Let's consider a scenario where there is a web page containing a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>If the browser window is resized to be smaller, a line break can appear between the label "Middle:" and the corresponding input field for "MiddleName". It would be more efficient to have breaks between labels and inputs that are not directly related, such as between the "FirstName" input and the label for "MiddleName", or between the "MiddleName" input and the label for "LastName". While it is possible to add <br/> tags manually, is there an effective way to keep related items together while also maintaining a single line layout when the browser window is wide enough?
This may seem like a simplistic example, but this issue arises in various complex forms found in real-world scenarios.