HTML Code Snippet:
<fieldset id="o-bs-sum-buginfo">
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
<label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
<input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
....
</fieldset>
Using only CSS (or jquery), irrespective of the browser size, I want to pair label and input elements next to each other. I also do have freedom to change tweak the HTML. if required.
Put the every label with its corresponding input into a p tag. Then add the following css:
label{
float:left;
width:100px; //whatever width that suits your needs
}
p{
margin:10px 0; //manipulate the vertical spaces for each input..
}
<fieldset >
<p>
<label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
<input type="text" name="ErrorPrefix" value="" />
</p>
</fieldset>