JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<ul id="data" class="Column1" style="float:left;width:45%;">
    <!-- data Start -->
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    <li>This is paragraph 1. Lorem ipsum ...</li>
    
    <!-- data Emd-->
</ul>
<ul id="Column2" style="float:right;width:45%;"></ul>

CSS

li{list-style:none;}
ul{margin:0; padding:0;}

JavaScript

$(document).ready(function () {
      var size = $("#data > li").size();
      $(".Column1 > li").each(function (index) {
          if (index >= size / 2) {
              $(this).appendTo("#Column2");
          }
      });
  });