checkbox_options: improve layout of options using flexbox

wraps checkbox and option in a container and adds display:flex to option.
this prevents weird option text wrapping in compact selects.

src/plugins/checkbox_options/plugin.scss

@@ -1,11 +1,18 @@
-.plugin-checkbox_options:not(.rtl) {
-	.option input {
-		margin-right: 0.5rem;
+.plugin-checkbox_options {
+	.option {
+		display: flex;
+		align-items: center;
+	}
+
+	&:not(.rtl) {
+		.option input {
+			margin-right: 0.5rem;
+		}
 	}
-}
 
-.plugin-checkbox_options.rtl {
-	.option input {
-		margin-left: 0.5rem;
+	&.rtl {
+		.option input {
+			margin-left: 0.5rem;
+		}
 	}
 }

src/plugins/checkbox_options/plugin.ts

@@ -18,6 +18,12 @@ import { preventDefault, hash_key } from '../../utils';
 import { getDom } from '../../vanilla';
 import { CBOptions } from './types';
 
+function wrap(nodes:Array<HTMLElement>) {
+	const wrapper = document.createElement('div')
+	nodes.forEach((n:HTMLElement) => wrapper.appendChild(n))
+
+	return wrapper
+}
 
 export default function(this:TomSelect, userOptions:CBOptions) {
 	var self = this;
@@ -85,7 +91,10 @@ export default function(this:TomSelect, userOptions:CBOptions) {
 
 			UpdateChecked(checkbox, !!(hashed && self.items.indexOf(hashed) > -1) );
 
-			rendered.prepend(checkbox);
+			const nodes = Array.prototype.slice.call(rendered.childNodes)
+			rendered.appendChild(wrap(nodes));
+			rendered.prepend(wrap([checkbox]));
+
 			return rendered;
 		};
 	});