Question

Fiddle

I want to move the input elements down in relation to their labels (only about 3 pixels). The main problem I am having is that making the inputs display: block; breaks the whole layout. I need the code text to appear right under the label and input that it is associated with, as it does now.

HTML:

<label for="inputSize"><p>Size</p><input id="inputSize" class="char2" type="text"><br><code>font-size: 17px;</code></label>
<label for="inputWeight"><p>Weight</p><input id="inputWeight" class="char3" type="text"><br><code>font-weight: 400;</code></label>
<label for="inputSpacing"><p>Letter-spacing</p><input id="inputSpacing" class="char2" type="text"><br><code>letter-spacing: 0;</code></label>
<label for="inputWSpacing"><p>Word-spacing</p><input id="inputWSpacing" class="char2" type="text"><br><code>word-spacing: 0;</code></label> 

CSS:

label {
    white-space: nowrap;
    display: inline-block;
}
label p {
    background: aqua;
    display: inline-block;
    color: @gray1;
    padding: 1px 10px;
    font-size: 16px;
    line-height: 24px;
}
input {
    font-family: monospace;
    height: 14px;
    box-shadow: 0px 0px 7px 0px #b8b8b8;
    border: 0;
}

Thanks!!

Answer 1

With position: relative you can move an element around relative to where it is supposed to be (in your case with top: 3px.

http://jsfiddle.net/ExplosionPIlls/3YUTM/1/