Styling Checkboxes with a separator

HTML

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Multi-page template</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body style="font-size: 12px;"> 
<div data-role="page" id="one">
    <div data-role="content">   
             <div data-role="fieldcontain">
                 <fieldset data-role="controlgroup">
                 
                    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                    <label for="checkbox-1">Option A</label>
                    
                    
                     <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                    <label for="checkbox-2">Option B</label>
                     <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
                     
                     <label for="checkbox-3"><textarea id="test"  data-role="none"></textarea></label>
                     
                       <label for="checkbox-4"><textarea id="test"  data-role="none"></textarea></label>
                       
                     <label for="mikeNumber"><input type=text name="mikeNumber" placeholder="Mikes Lable" /></label>
                 </fieldset>
             </div>
</body>
</html>

CSS

span.ui-btn-text:before {
    content:"";
    border-right: 1px solid #CCC;
    margin-right: 10px;
    position: absolute;
    height: 550px;
    top:-300px;
    left: -10px;
}
.ui-btn-text {
    margin-left: 10px;
}

JavaScript

$('#test').css('background-color', 'white').css('font-size', '18px').css('height', '18px').css('width', '80%').attr('rows', 10);