Align textfield label with the checkbox label - css

Question

I have a checkbox and two text fields. When the checkbox is checked, the two textfield appear (via jquery code). I want that the two label "First field" and "Second field" be aligned with the label "MyCheckbox" Or, in some way, that the two textfield label should be indented respect to the level of the checkbox.
This is my html code:
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<div><label>First field</label>
<input type="text" name="first_field" value="">
</div>
<div><label>Second field</label>
<input type="text" name="second_field" value="">
</div>
</div>
How could I do it with css?

Answer 1

#mydiv div {
padding-left: 16px;
}
​
JSFiddle

Answer 2

You could put them inside of the same div and append to the div using jquery. You would access the div like this
$('input[name=mycheckbox]').parent()
and the append like this
$('input[name=mycheckbox]').parent().append($('#mydiv').html());
If you put the first field and second field outside of the div and the div has a default width //width = 100%
It will be put underneath your first checkbox div. So you need to do one of two things...
Use the above jquery to put your code inside of the 100% div
Or specify the first div's width and float the item next to it an
example of this is
////the float is optional
//div{
//width: 50%;
//float:left;
//}
//#mydiv{
//width: 50%;
//float:left;
//}