Question

Imagine the following illustrative HTML:

<form>
<div class="line">
    <label class="lbt" for="name">Name:</label>
    <span class="obr">*</span>
    <input id="name" class="inp" type="text" />
    <span class="err">Missing!</span>
</div>
<div class="line">
    <label class="lbt" for="area">Area:</label>
    <input name="area" class="inp" type="text" />
    <span class="suf">m<span style="vertical-align: super;">2</span></span>
    <span class="err">Missing!</span>
</div>
</form>

By client requirement, both the label and the span with the obligatory indicator must be in the same line, being the input and the rest of the spans in the next line.
The obligatory indicator must be right after the label text and the other spans right after the input element.

Sadly I can’t change the HTML code or I would put the obligatory element inside the label and use a display: block style (or wrap both in a span and do the same).

I tried using the .obr::after to create a line break but since this element doesn’t always exist and I can’t use ::before in an input element so I tend to believe using content isn’t feasible unless there’s a way to put it conditionally (.lbt::after or in .obr::after if exists). Here’s a jsfiddle with this problem.

I also tried float and positions approaches but haven’t found a good generic solution that could fit any label or input size.
I may consider using jQuery for this, but I would prefer a simpler approach only by CSS.

Been almost two days trying to find a good solution…

Answer 1

label and the * <span> right beside each other.

<input /> and the other <span> beside each other on another line.

    .line
    {
        border: 2px solid black;
        padding: 5px;
        overflow:hidden;
    }

    .line .obr
    {
        color: Red;
        font-weight: bold;
        float:left;
    }

    .lbt
    {
        float:left; 
     }
    .line .obr::after
    {
        content: '\A';
        white-space: pre;
    }
    .inp
    {
        float:left; clear:both;
        margin-top:5px;

    }
    .line span
    {
        float:left;
    }

Check this out : http://jsfiddle.net/AliBassam/2LqCc/

If you want the <span> beside the <input /> to be lower then add margin-top:5px;