JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra ex a ultrices vehicula. Nullam in volutpat purus, sed tristique nunc. Sed viverra magna non est fringilla, eu porta odio vehicula. Nam in est ac libero mollis pellentesque a sagittis dolor. Vivamus nec nulla felis. In dignissim maximus varius. Aliquam erat volutpat. Duis rhoncus ornare mauris id mollis.</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: Praesent aliquet, sem sit amet dapibus convallis, ligula lorem feugiat nisl, vel imperdiet enim neque a ipsum. Nulla nec justo sapien. Mauris tempus elit vitae est porta tristique..</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: Maecenas hendrerit quam varius, laoreet sem eu, bibendum felis. Donec feugiat neque quis elit laoreet, et tincidunt arcu ultrices.</label>

CSS

input[type=checkbox] { 
	display:none;
} 

input[type=checkbox] + label:before {
	font-family: FontAwesome;
	display: inline-block;
	content: "\f096";
	letter-spacing: 10px;
	cursor: pointer;
}

input[type=checkbox]:checked + label:before { 
	content: "\f046";
} 

input[type=checkbox]:checked + label:before { 
	letter-spacing: 8px;
}