JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>

<canvas id='canvas'></canvas>

CSS

section {
  float:left;
  width: 100%;
  background-color:red;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

JavaScript

function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(0, 0, 900, 50);

        
      }
    }
    
    draw();
    
    function getWidth(qty1, qty2){
      if(qty1 && qty2)
        return (Number(qty1)/(Number(qty1)+Number(qty2)))*505;
    }
    
    console.log(getWidth(50, 50));