How to alter the width of a Checkbox label without affecting the Checkbox?

I have a Checkbox that has been custom created (not standard browser checkboxes).

I need the label text to be on one line but because the width is set to 28px in the CSS (as this is the size of the circle checkbox), it then makes the text go over more than one line.

So I am having trouble with making the circle stay the same size with the text on one line next to it. When I set the width to 100% it obviously disfigures the circle. Please see the below JSFiddle.

http://ift.tt/2b163hI

HTML:

  Subscribe to this site

CSS:

.wpcf7-list-item input[type=checkbox] {
visibility: hidden;
}
.wpcf7-list-item .wpcf7-list-item-label {
text-indent: 35px;
}
.wpcf7-list-item > label > input[type=checkbox] + span  {
width: 28px;
 height: 28px;
display: inline-block;
 position: relative;
  top: 0;
  left: 0;
border-radius: 50px;
border: 1px solid #000000;
vertical-align:middle;
cursor: pointer;
box-sizing: border-box;
margin-right:50px;

}
.wpcf7-list-item > label > input[type=checkbox] + span:after  {
content: '';
width: 16px;
height: 16px;
position: absolute;
background-color: #000000;
top: 2px;
left: 2px;
border-radius: 50px;
opacity: 0;
}
.wpcf7-list-item > label > input[type=checkbox]:checked + span:after {
opacity: 1;
}

Thanks in advance.