title: Creating the html for css
body: <p>I am a student and trying to generate the html for css provided to me. The problem I am having is the <code>.hue</code> and <code>.luminosity</code> css classed are not positioning my html to the left and right as shown in the second question. Instead everything is center aligned(as shown in the first image). I need some help with the html to align my elements correctly.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Pick &amp; click&lt;/title&gt;
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;link id=&quot;fav&quot; rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;data:image/x-icon;,&quot;&gt;
      &lt;style&gt;
          :root {
              --background: hsl(0, 0%, 12%);
              --text: hsl(0, 0%, 80%);
              --clear: hsl(0, 0%, 65%);
              --disabled: hsl(0, 0%, 35%);
              --purple: #bb73e6;
          }
  
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }
  
          body {
              font-family: sans-serif;
              letter-spacing: 1.5px;
              background: var(--background);
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-content: center;
              width: 100vw;
              height: 100vh;
              padding: 5rem;
              cursor: crosshair;
          }
  
          svg {
              filter: invert(100%);
              position: fixed;
              width: 100vw;
              height: 100vh;
              top: 0;
              left: 0;
          }
  
          svg line {
              stroke-width: 0.6px;
              stroke: grey;
          }
  
          .text {
              position: fixed;
              filter: invert(100%);
              font-size: 50px;
              cursor: pointer;
              white-space: pre-wrap;
          }
  
          .hsl {
              filter: invert(100%);
              font-size: 17px;
          }
  
          .hue {
              top: 100px;
              right: 100px;
              text-align: right;
          }
  
          .luminosity {
              bottom: 100px;
              left: 100px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type=&quot;module&quot;&gt;
  
          import { pick } from './pick-and-click.js'
  
          pick()
  
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>javascript code:</p>
  <pre><code>export function pick() {
      var background = document.createElement(&quot;div&quot;);
      background.className = &quot;background&quot;;
      document.body.append(background);
  
      var hsl = document.createElement(&quot;div&quot;);
      hsl.className = &quot;hsl&quot;;
      document.body.appendChild(hsl);
  
      var hue = document.createElement(&quot;div&quot;);
      hue.className = &quot;hue&quot;;
      document.body.appendChild(hue);
      hue.style.height = &quot;100vh&quot;
  
      var luminosity = document.createElement(&quot;div&quot;);
      luminosity.className = &quot;luminosity&quot;;
      document.body.appendChild(luminosity)
  
      document.addEventListener(
          &quot;mousemove&quot;, function (e) {
              var heightMultiplier = window.screen.height / 100;
              var widthMultiplier = window.screen.width / 360;
              var hueVal = Math.round(e.offsetX / widthMultiplier);
              var luminosityVal = Math.round(e.offsetY / heightMultiplier);
              hsl.innerHTML = &quot;hsl(&quot; + hueVal + &quot;, 50%, &quot; + luminosityVal + &quot;)&quot;;
              hue.innerHTML = &quot;hue&quot; + hueVal;
              luminosity.innerHTML = &quot;luminosity&quot; + luminosityVal;
              //document.style.background
              //  = `rgb(${x}, ${y}, ${x - y})`;
          });
  }
  </code></pre>
  <p>Actual:
  <a href="https://i.stack.imgur.com/r6U11.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r6U11.png" alt="enter image description here" /></a></p>
  <p>Expected:
  <a href="https://i.stack.imgur.com/WvIc9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WvIc9.png" alt="enter image description here" /></a></p>