Using CSS, checkbox and selectors to control visibility of form field

I'm trying to use a checkbox to control the visibility of a field. The code below works fine but I want ideally to put the checkbox & label fields in a paragraph tag so I can style and add padding etc.

<input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div>


input[type=checkbox] + label {
    color:#000000;
    font-weight:bold;} 

input[type=checkbox]:checked + label ~ .testerclass {
    display:inline;} 

When I add the paragraph tag around it stops working. I can see the reason for this is that the checkbox no longer has the same parent as the div I'm wanting to display, but I can't work out how to do this in CSS because I need to refer to the state of the checkbox. Can anyone help at all? Thank you.

<p class="styletoline"><input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div></p>