How to automatically divide a div in two parts

The below elements are coming from a database table.

<div id="some_content">
  <a href="#">Data1</a><br>
  <a href="#">Data2</a><br>
  <a href="#">Data3</a><br>
  <a href="#">Data4</a><br>
  <a href="#">Data5</a><br>
</div>

There might a case when there are more than 50 elements, and if that happens, I don't want my page window to overflow (and scroll).

I only want two columns.

It should adjust the number of rows into one / two columns automatically.

Whenever there are more than 10 elements, I want two columns in the web page. Now there can be n-number of a elements.

If there are 50, then it should automatically adjust 25 in each column, and if 30, then 15 in each.