css alignment for checkbox

I have my customize checkbox.

MY HTML :

<div class="checkboxes dashboard-checkboxes ng-scope">
    <label class="checkbox">
        <input type="checkbox" ng-model="component.visible" id="AlertsComponent" class="ng-pristine ng-valid">
        <span class="comp-name ng-scope ng-binding">Alerts by Entity</span>
    </label>
</div>

MY CSS:

/* checkbox -*/
.radios label,
.radios input[type="radio"] + span,
.radios input[type="radio"] + span::before,
.checkboxes label,
.checkboxes input[type="checkbox"] + span,
.checkboxes input[type="checkbox"] + span::before {
    display:inline-block;
    vertical-align:middle
}
.radios,
.checkboxes {
    position:relative
}
.radios label *,
.checkboxes label * {
    cursor:pointer
}
.radios input[type="radio"],
.checkboxes input[type="checkbox"] {
    position:absolute;
    display:none
}
.radios input[type="radio"] + span,
.checkboxes input[type="checkbox"] + span {
    color:#333
}
.radios label:hover span,
.checkboxes label:hover span {
    color:#000
}
.radios input[type="radio"] + span::before,
.checkboxes input[type="checkbox"] + span::before {
    margin:0 4px 0 0;
    width:13px;
    height:13px;
    border:solid 2px #ccc;
    background-size:13px;
    content:"";
    text-align:center;
    line-height:17px
}
.checkboxes input[type="checkbox"] + span:hover:before {
    border:solid 2px #5a5a5a
}
.radios input[type="radio"]:checked + span::before,
.checkboxes input[type="checkbox"]:checked + span::before {
    width:13px;
    height:13px;
    border:solid 2px #ccc;
    background-color:#FFFFFF;
    color:#01A982;
    line-height:17px
}
.radios input[type="radio"]:disabled + span,
.checkboxes input[type="checkbox"]:disabled + span {
    opacity:.4;
    cursor:default
}
.checkboxes input[type="checkbox"] + span::before {
    border-radius:inherit;
}
.radios input[type="radio"]:checked + span::before {
    content:"\2022";
    font-size:24px
}
.checkboxes li{
    list-style: none;
}

:root .checkboxes input[type="checkbox"]:checked + span:before {
    content: "\2713"; 
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
}
.checkboxes input[type="checkbox"]:checked + span::before {
    background-color: #FFFFFF;
    border: solid 2px #01A982;
    color: #01A982;
    line-height: 14px;
}
.checkboxes input[type="checkbox"]:checked + span::before {
    border: solid 2px #01A982;
}/* checkbox -*/

My Checkbox is coming in this way:

But I want it to be: checkbox should come in second line.

Please help me What style I can modify. My Fiddle: http://ift.tt/1JNVZBR