css clear an element and make the other one follow - html

Question

I am making this basic thing were there is a label followed by a textblock and on another line there is a button with a textblock for the answer besides the button.
I want the button(generateButton) and the textblock for answer (answerField) under the label (labelDay)and the first textblock(dayInput) but when I clear left on the button and the answerbox it sets the button under the label and first inputbox but my answerbox goes under my button and it needs to be besides it. Is there a way to do it without a br tag?
This is my code so far
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
clear: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">

Answer 1

Why do you use float in this situation?
All Elements are inline-elements. So they would appear next to each other.
My approach is to define two div-blocks for the rows (no css):
<div>
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
</div>
<div>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
</div>

Answer 2

You almost had it - you just need to remove the clear: left from #answerField.
Floats make elements "flow" around eachother - you can imagine a bunch of float: left elements as each trying to move as far to the left as they can without touching another element or going off the side of the screen before going to the next line.
A clear on an element forces itself, and any floated element after it to the next line - so your clear on #generatButton is already starting a second line, and the on #answerField is starting an unwanted 3rd one.
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">