Align custom radio button with the top option content - html

Question

I update this content with a new Jsfidle to show the issue with a max-width of 300px.
On a responsive design, I need to add the "span" tag in front of my radio buttons in order to align my input content with my custom checkbox background.
To review the issue, reduce the windows browser until an option is displayed on two lines
HTML
<ul id="sectors">
<li id="title"><p class="f32l32">Sectors</p></li>
<li>
<label class="search-radio-button f15l18">
<input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
<span class="Built environment"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="62" name="sectors[]" type="radio" class="radio sectors-radio-button"> Defence & government
<span class="Defence & government"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="63" name="sectors[]" type="radio" class="radio sectors-radio-button"> Manufacturing & technology
<span class="Manufacturing & technology"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="64" name="sectors[]" type="radio" class="radio sectors-radio-button"> Oil, energy & mining
<span class="Oil, energy & mining"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="65" name="sectors[]" type="radio" class="radio sectors-radio-button"> Transport
<span class="Transport"></span>
</label>
</li>
<li>
<label class="search-radio-button f15l18">
<input value="66" name="sectors[]" type="radio" class="radio sectors-radio-button"> Utilities & infrastructure
<span class="Utilities & infrastructure"></span>
</label>
</li>
CSS
ul#sectors, ul#locations {
display: inline-block;
padding-bottom: 2.5%;
}
#detail-search-container li#title {
width: 100%;
display: inline-block;
padding-bottom: 5%;
padding-top: 6%;
}
#detail-search-container li {
min-height: 20px;
width: 50%;
float: left;
display: inline-block;
}
#detail-search-container li label {
padding-left: 20px;
display: inline-block;
padding-left: 20%;
width: 80%;
}
.search-radio-button span {
width: 20px;
width: 22px;
height: 22px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: -3px;
display: inline-block;
margin-left: -20%;
}
.search-radio-button input {
display: none;
}
.search-radio-button input:checked + span, .class_checkbox.checked {
background-position: 0px -20px;
background-position: 0px -26px;
}

Answer 1

I have made some cosmetic changes to your CSS as i'm mentioning below with comments.
1) Remove background-position:
.search-radio-button input:checked + span, .class_checkbox.checked {
background-position: 0px -20px;
background-position: 0px -26px; // remove this
}
2) Set margin-top and left acordingly
.search-radio-button span {
width: 20px;
width: 22px;
height: 22px;
float: left;
background: url("http://satafx.com/img/radio.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: 0; //change this
display: inline-block;
margin-left: -9%; //change this
}
Fiddle Demo
Updated Fiddle
Hope you want like this!

Answer 2

If I understand correctly, I just have to put the span before the input...
<li>
<label class="search-radio-button f15l18">
<span class="Built environment"></span>
<input value="61" name="sectors[]" type="radio" class="radio sectors-radio-button"> Built environment
</label>
</li>
I hope this is what you are looking for...