title: Using CSS, checkbox and selectors to control visibility of form field
body: <p>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 &amp; label fields in a paragraph tag so I can style and add padding etc. </p>
  
  <pre><code>&lt;input type="checkbox" id="cbx" name="cbx"&gt;&lt;label for="cbx"&gt;Different drop off location?&lt;/label&gt;
  &lt;div class="testerclass"&gt;&lt;p&gt;Some text here&lt;/p&gt;&lt;/div&gt;
  
  
  input[type=checkbox] + label {
      color:#000000;
      font-weight:bold;} 
  
  input[type=checkbox]:checked + label ~ .testerclass {
      display:inline;} 
  </code></pre>
  
  <p>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>
  
  <pre><code>&lt;p class="styletoline"&gt;&lt;input type="checkbox" id="cbx" name="cbx"&gt;&lt;label for="cbx"&gt;Different drop off location?&lt;/label&gt;
  &lt;div class="testerclass"&gt;&lt;p&gt;Some text here&lt;/p&gt;&lt;/div&gt;&lt;/p&gt;
  </code></pre>