Is there a way to keep my label and text on the same line by adjusting the CSS? I've tried using float based on suggestions from other posts, but they still end up on different lines.
.indentColumn {
width: 71px;
padding-top: 5%;
}
.labelColumn {
width: 71px;
margin-left: 15%;
}
.inputForm {
margin-left: 30%;
}<div class="indentColumn">
<div class="labelColumn">
<div class="inputForm">
<span class="secNav">
<label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
</label>
<input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
value="#if($username)$encoder.encodeForHTML($username)#end">
</span>
</div>
</div>
</div>After removing unnecessary divs, display properties, and classes in the textbox, I was able to get the label and text on the same line. It turns out, the issue was caused by the class in the textbox, which once removed, resolved the problem.
I also discovered that a form div set to 250px was forcing the text field onto the next line whenever there was left-margin applied. Removing this fixed the alignment issues.