JSFiddle - React, Tailwind, and code Playground

HTML

<div id="data" class="Column1" style="float:left;width:300px;">
    <!-- data Start -->
    <p>This is paragraph 1. Lorem ipsum ...</p>
    <p>This is paragraph 2. Lorem ipsum ...</p>
    <p>This is paragraph 3. Lorem ipsum ...</p>
    <p>This is paragraph 4. Lorem ipsum ...</p>
    <p>This is paragraph 5. Lorem ipsum ...</p>    
    <p>This is paragraph 6. Lorem ipsum ...</p>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

JavaScript

$(document).ready(function () {
      var size = $("#data > p").size();
      $(".Column1 > p").each(function (index) {
          
          if (index >= size / 2) {
              $(this).appendTo("#Column2");
          }
      });
      $(".Column1, #Column2").append("<img src='http://placekitten.com/50/50'>")
  });