title: Randomly add class to two divs
body: <p>I have a two column red/black grid 50/50% and height 100% and had a script to randomize the appearance of both when loading the page, so left or right. I changed the code behind the two column grid a bit going from relative position and float left of right to a fixed and absolute position. This has to do because of the scrolling behavior when in mobile this way it works nicer.</p>
  
  <p>The code below worked fine when using floating it adds a class left or right that makes the red side choose a random side and the black automatically follows, because it is relative to each other. Using absolute and fixed position changes that it has to add to both sides a class left or right to work. Someone know how to add this so when red is left, black is right and visa versa.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Random red &amp; black //
  
  window.addEventListener('load', function() {
    // This is a ternary operator, which is just a shorthand way to 
    // do an if/else statement. This basically says, if the random number
    // is less than .5, assign "left" to the scenario variable.
    // if it is greater (or equal to), assign "right" to the variable. 
    var scenario = Math.random() &lt; .5 ? "left" : "right";
  
    document.querySelector(".red", ).classList.add("" + scenario);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left {
    left: 0;
  }
  
  .right {
    right: 0;
  }
  
  .red,
  .black {
    width: 50%;
    height: 100%;
  }
  
  .black {
    position: absolute;
    background-color: black;
  }
  
  .red {
    position: fixed;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="red"&gt;&lt;/div&gt;
  &lt;div class="black"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>