Question

I just can’t seem to figure this out even after fiddling with the float variable.
The “Q1” appears after the label :/

<div class="question active">Q1<input id="one" type="text"></div>


.question {
    display: none;
    float:left
}
.question.active,.question.answered {
    display: block;
    float: left;
    clear: left;

}
.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}
.question.answered input {
    border: 0px solid black;
    float: left;
}
.button {
    display: none;
}
.button.active {
    display: block;
    float: left;
}
.clickbutton {
    clear: left;
    float: left;
}

.focusField{
    border:solid 2px #73A6FF;
    background:#EFF5FF;
    color:#000;
}

Thanks a lot 🙂

Answer 1

Your input is floated left.

.question.active input {
    border: 1px solid black;
    float: left;
    clear: left;
}

This places it before the text in your .question.active div.

If you placed the Q1 in a label and floated that left first, it would all work out.