title: Split the div to two parts and load the content into second half
body: <p>I have a div element split and it has few css cards inside it. i want to load that card into a second window ( when i click that card on split div the window should divide itself into two and load that card into the second div.
  But far i am not able to slit the div on click only.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var  $m = $("#split"), size = 2;
  
  $m.click(function(){
    
      var  _size = $m.width/size;
      var i= "sec";
      
      
          $m.append(
              $('&lt;div id='+ i +'/&gt;')
              .css('background-color', 'white'));
         
  
      $m.find('&gt; div').css({ width:_size, height:_size });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#split{
  height:700px;
  width:500px;
  }
  
  .tu{
          height: 162px;
      width: 350;
      float: left;
     
      position: relative;
      
  }
  
   .gradient {
    
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  
      background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
      background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
      background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
      background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row" id="split" style="width:100%;"&gt;
          &lt;div class="tu"&gt;
            &lt;div class="card"&gt;
                &lt;div class="gradient"&gt;
              &lt;div class="card-image"&gt;
                &lt;img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg"&gt;
                &lt;span class="card-title"&gt;Card Title&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="card-content"&gt;
                &lt;p&gt;I am a very simple card. I am good at containing small bits of information.
                I am convenient because I require little markup to use effectively.&lt;/p&gt;
              &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What i want is when i click .tu class the #split  should divide into two and show load tu into second half</p>