title: I need to design one popup where i can display the data half on the left and half on the right side,
body: <p>I have 100 rows, I need to display in a popup. So, 50 rows should be displayed in left side of the popup and 50 rows should be displayed right side of the popup.</p>
  <p>This is my HTML code that I have tried. But, I can not get two tables.</p>
  <p>HTML Code</p>
  <pre><code>&lt;div class=&quot;panel-body p0&quot;&gt;
    &lt;ul ui-sortable=&quot;sortableOptions&quot; ng-model=&quot;itemListArray&quot; style=&quot; list-style: none outside none;  padding-inline-start: 15px; &quot;&gt;
      &lt;li class=&quot;featureContentBox-30&quot; ng-style=&quot;{ 'cursor' : (sortableEventStart == true) ? 'all-scroll' : 'default' }&quot; ng-repeat=&quot;dimension in (itemListArray | limitTo: totalShow.count) track by $index&quot;&gt;
        &lt;div class=&quot;row p10&quot;&gt;
          &lt;div class=&quot;col-sm-1&quot;&gt;
            &lt;i class=&quot;fa fa-bars&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-2&quot;&gt;
            {{$index+1}}
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
            {{dimension.valueName}}
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;{{dimension.displayName}} &lt;/div&gt;
          &lt;div class=&quot;col-sm-1&quot; ng-click=&quot;removeDimension($index)&quot;&gt; x&lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>