JSFiddle - React, Tailwind, and code Playground

HTML

<div runat="server" id="div_scroll">
       <div runat="server" id="div_columns">
          <p> When too much text is in the div, I would like to be able to scroll vertically, with new text coming up from bottom of the right-most column, and the old text exiting above the left most column - Basically, like a text-area, except with two columns. Instead, what happens is that it creates extra columns you have to to scroll horizontally for. While I could try to store each line of text in an array, and then change that on scroll, I was curious if there is already a way to do this in plain CSS or if a solution already exists via JavaScript. Thanks!</p>
       </div>
    </div>

CSS

#div_scroll {
overflow-y: scroll;
overflow-x: hidden;
width: 400px; /*modify to suit*/
height: 200px; /*modify to suit*/
}

#div_columns
{
direction:rtl; /*column direction ltr or rtl - modify to suit*/
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2
overflow-y: hidden;
overflow-x: hidden;
width: 380x; /*width of columns div has to be specified - modify to suit*/
/* do not specify height parameter as it has to be unrestricted*/
padding: 10px;  
}

p
{
    text-align: justify;
}
}