How do I use a checkbox to show an input field after being checked?

I have very basic skills in HTML and CSS. I need to create a registration form but I want the option to Add a PO Box. I would like to use a checkbox to toggle an input text to appear below the checkbox. I have tried numerous ways but either always show the textbox or the checkbox does nothing. Here is my code for my form. I don't want the input box to appear until after the checkbox is checked.

<div class="form-style-2">
<div class="form-style-2-heading">Provide your information</div>
<form name="myform" action="" method="post" style="width:50%">
<ul style="list-style-type:none">
<li>
<input type="text" name="accountname" style="width:95%" class="field-style field-full align-none" placeholder="Company Name" />
</li>
<li>
<label>Please fill in your contact information below</label>
    <input type="text" name="firstname" class="field-style field-split align-left" placeholder="First Name" />
    <input type="text" name="lastname" class="field-style field-split align-right" placeholder="Last Name" />
</li>
<li>
    <input type="text" name="address" class="field-style field-split align-left" placeholder="Street # and Name" />
    <select placeholder="Street Type" style="height:33" class=""field-style field-split align-center">
    <option value="" disabled selected>Street Type</option>
    <option value="St.">Street</option>
        <option value="Rd.">Road</option>
        <option value="Way">Way</option>
    </select>

    <select placeholder="Direction" style="height:33" class="field-style field-split align-right">
    <option value="" disabled selected>Direction (If Applicable)</option>
    <option value="N">North</option>
            </select>

</li>
<li>
    <select placeholder="State" style="height:33"class="field-style field-split align-left">
    <option value="" disabled selected>State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
            </select>
    <input type="text" name="Street Name" placeholder="Zip Code" class="field-style field-split align-right"/>
</li>

<li>
    <label>Telephone Number</label><input type="text" class="tel-number-field" name="tel_no_1" value="" maxlength="4" />-<input type="text" class="tel-number-field" name="tel_no_2" value="" maxlength="4"  />-<input type="text" class="tel-number-field" name="tel_no_3" value="" maxlength="10"  />
</li>
<li>    
    <input type="email" name="email" placeholder="E-Mail Address" />
</li>
<input type="checkbox" />   

</br>
</br>
<li>
<button type="submit" style="width:95%">Submit Account</button>
</li>
</ul>
</form>
</div>