Align multiple labels to left of form input - html

Question

I'm trying to stack two <span> tags in a form input label. At the moment, they're sitting next to each other, but I'm not sure how to move span.label-sm under the regular span. I've already set it to display: block;.
Desired outcome: http://i.imgur.com/CkOKeWl.jpg.
HTML:
<div id="appraisals-form" class="contact-form">
<form role="form" method="post" action="contact-form.php">
<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
<label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
<label for="name"><span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork." /></label>
<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
<div class="centred-button"><input type="submit" value="" class="submit-button" /></div>
</form>
</div>
CSS:
.contact-form {
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 600px;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 20px;
}
.contact-form label {
display: block;
margin: 0px 0px 15px 0px;
text-transform: uppercase; /* New */
}
.contact-form label > span {
padding-top: 8px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
}
.contact-form input, .contact-form textarea {
margin-bottom: 15px;
padding: 10px;
border: none;
}
.contact-form input.input-field {
width: 70%;
height: 20px;
font-size: 18px;
}
.contact-form .textarea-field {
height: 250px;
margin-bottom: 11px;
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
font-size: 18px;
display: inline-block;
}
.g-recaptcha {
height: 78px !important;
}
#recaptcha {
display: block;
margin: 0px 0px 24px 0px;
}
textarea {
resize: none;
}
textarea:focus, input:focus {
outline: 0;
}
input.submit-button {
background-image: url("../img/submit-button.jpg");
width: 225px;
height: 60px;
border: none;
}
.appraisals .section-title {
width: 100%;
}
#appraisals-form {
width: 100%;
max-width: 700px;
top: auto;
transform: none;
}
#appraisals-form label > span {
width: 150px;
font-size: 16px
}
#appraisals-form span.label-sm {
display: block;
font-size: 14px;
text-transform: none;
}
#appraisals-form input, #appraisals-form textarea {
background-color: #d7d7d7;
}
#appraisals-form textarea {
height: 100px;
}
#appraisals-form .centred-button {
text-align: center;
}
Fiddle: http://jsfiddle.net/tcap2Lcp/.
Any help would really appreciated!

Answer 1

As an alternative to my first answer, which uses CSS positioning properties and width adjustments to align the labels on the left of the input, this solution keeps things very simple with only HTML.
The idea is to display the small labels as placeholder text.
This element gets deleted:
<span class="label-sm">(i.e. sculpture, painting...)</span>
But the text goes into a placeholder:
<label for="name">
<span>Type of Artwork</span>
<input type="text" class="input-field" name="name" required
data-errormessage-value-missing="Please enter your item's type of artwork."
placeholder="(i.e. sculpture, painting...)" >
</label>
And that's it!
Clean, simple, reusable code (as you requested). Easy to maintain. User-friendly. And no changes to the CSS...
unless you decide you want to style the placeholder text.

Answer 2

You can accomplish this task with CSS positioning properties.
HTML
<!-- ADJUSTED BLOCK START -->
<label for="name" style="position: relative; width: 100%;">
<span style="width: 24%; padding: 0; position: relative; left: -2%;">
Type of Artwork</span>
<span style="width: 24%; padding: 0; position: absolute; left: -2%; bottom: 30%;"
class="label-sm">(i.e. sculpture, painting...)</span>
<input style="width: 70%" type="text" name="name"
required data-errormessage-value-missing="Please enter your item's type of artwork.">
</label>
<!-- ADJUSTED BLOCK END-->
DEMO
I used inline styles for brevity and clarity. Hope this helps.

Answer 3

This will nest the two <span> tags without changing the appearnce:
<span>Type of Artwork</span><span class="label-sm">(i.e. sculpture, painting...)</span></span>
I'm unsure what you are trying to achieve though, so not sure if your CSS needs a small change, possibly:
.label-sm {
display: block;
font-size: 14px;
text-transform: none;
}

Answer 4

If i get you right this should work for you - just add float: none; to #appraisals-form span.label-sm.
Here is the whole css:
.contact-form {
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 600px;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 20px;
}
.contact-form label {
display: block;
margin: 0px 0px 15px 0px;
text-transform: uppercase; /* New */
}
.contact-form label > span {
padding-top: 8px;
}
.contact-form label > span, #recaptcha::before {
width: 100px;
text-align: right;
float: left;
padding-right: 20px;
content: "";
}
.contact-form input, .contact-form textarea {
margin-bottom: 15px;
padding: 10px;
border: none;
}
.contact-form input.input-field {
width: 70%;
height: 20px;
font-size: 18px;
}
.contact-form .textarea-field {
height: 250px;
margin-bottom: 11px;
}
.contact-form .textarea-field, .g-recaptcha {
width: 70%;
font-size: 18px;
display: inline-block;
}
.g-recaptcha {
height: 78px !important;
}
#recaptcha {
display: block;
margin: 0px 0px 24px 0px;
}
textarea {
resize: none;
}
textarea:focus, input:focus {
outline: 0;
}
input.submit-button {
background-image: url("../img/submit-button.jpg");
width: 225px;
height: 60px;
border: none;
}
.appraisals .section-title {
width: 100%;
}
#appraisals-form {
width: 100%;
max-width: 700px;
top: auto;
transform: none;
}
#appraisals-form label > span {
width: 150px;
font-size: 16px
}
#appraisals-form span.label-sm {
display: block;
font-size: 14px;
text-transform: none;
float: none;
}
#appraisals-form input, #appraisals-form textarea {
background-color: #d7d7d7;
}
#appraisals-form textarea {
height: 100px;
}
#appraisals-form .centred-button {
text-align: center;
}
hope it helps :)
Further explanation
The problem was caused by float: left; at .contact-form label > span which floatet your span in general.

Answer 5

The easyest way is to add this class to CSS :
label {float: left; width: 10em; margin-right: 1em; text-align: right;}