JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">

    <div class="col-lg-6 unselectable">
        First Paragraph
    </div>
    <br/><br/>
    <div class="col-lg-6 unselectable">
       Second Paragraph
    </div>
</div>

CSS

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

*.unselectable * {
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;
}

JavaScript

$(document).on('click','div',function() { 
        $(this).removeClass('unselectable').siblings().addClass('unselectable');
 });