JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="container">
    <div id="header">
         <h1>Main Title of Web Page</h1>
Here I am trying to split the webpage into two columns and display text.</div>
    <div id="one"></div>
    <div id="two"> <b>This is test one<br /></b>
 <b>This is test two<br />
           </b>

    </div>
</div>

CSS

#container {
     width:100%;
     height:200px;
 }
 #header {
     margin-bottom:0;
     background-color:red;
 }
 #one {
     width:40%;
     height:200px;
     float:left;
     background-color:yellow;
 }
 #two {
     width:60%;
     height:200px;
     float:left;
     background-color:cyan;
 }
 #one > span {
     display:block;
 }

JavaScript

//var wrapping_div = document.createElement('div');
var wrapping_div = document.getElementById('one');
//document.body.appendChild(wrapping_div);

function shuffleArray() {
    var i, j, temp, span, div,
    c = wrapping_div.childNodes,
        l = c.length,
        array = ['Sound simulation', 'liquids', 'Coded aperture imaging', 'computational light modulation', 'Cloth simulation', 'fractional derivatives', 'physically-based animation', 'underwater simulation', 'Computational photography', 'pose estimation'],
        k = array.length;
    for (i = k - 1; i >= 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }

    for (i = l - 1; i >= 0; i--) {
        c[i].firstChild.removeEventListener('click', shuffleArray);
        wrapping_div.removeChild(c[i]);
    }

    for (i = 0; i < k; i++) {
        span = document.createElement('span');
        span.innerHTML = array[i];
        span.addEventListener('click', shuffleArray);
        div= document.getElementById('one');
        //div = document.createElement('div');
        div.appendChild(span);
        //wrapping_div.appendChild(div);
    }
}

shuffleArray();