Checkbox div

HTML

<div class="example">
            <div>
                 <h1>The checkbox is in a div so it doesn't work</h1>
                <input type="checkbox" id="check">
                <label for="check">Hello</label>
            </div>

            <div class="check"></div>

        <div class="example2">
             <h1>I'm trying to achieve this</h1>
            <!-- not in div tags --><input type="checkbox" id="check2">
            <label for="check2">Hello</label>

            <!-- not in div tags --><div class="check"></div>
        </div>

CSS

.check:before {
                display:block;
                width: 100px;
                height: 100px;
                background: red;
                content:'';                
            }        
.show-content::before {
  content:'Content' !important;
}

JavaScript

$(document).ready(function(e) {
  $('input#check').click(function(){
  	$('.check').toggleClass('show-content');
  });
});