JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>
<div id="game">
</div>
</body>
</html>

CSS

#color-picker-line-picker {
    width: 4px;
    height: 6px;
    position: absolute;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
}

JavaScript

let game = document.getElementById('game');
let canvas2 = document.createElement('canvas');
canvas2.id = 'color-picker-line';
canvas2.width = 35;
canvas2.height = 200;
let context2 = canvas2.getContext('2d');
let gradient2 = context2.createLinearGradient(0, 0, 0, canvas2.height);
gradient2.addColorStop(0, "hsl(0, 100%, 50%)");
gradient2.addColorStop(1 / 6, "hsl(60, 100%, 50%)");
gradient2.addColorStop(1 / 3, "hsl(120, 100%, 50%)");
gradient2.addColorStop(0.5, "hsl(180, 100%, 50%)");
gradient2.addColorStop(2 / 3, "hsl(240, 100%, 50%)");
gradient2.addColorStop(5 / 6, "hsl(300, 100%, 50%)");
gradient2.addColorStop(1, "hsl(360, 100%, 50%)");
context2.fillStyle = gradient2;
context2.fillRect(0, 0, canvas2.width, canvas2.height);
let picker2 = document.createElement('div');
picker2.id = 'color-picker-line-picker';
let container = document.createElement('div');
container.id = 'color-picker-line-container';

game.append(container);
container.append(canvas2);
container.append(picker2);

//let picker2Style = getComputedStyle(picker2);
//console.log(getComputedStyle(picker2).width ); //text "4px"
console.log(picker2.offsetWidth);
container.style.position="relative";
container.style.width = canvas2.width + picker2.offsetWidth+"px";
container.style.height = canvas2.height+"px";
picker2.style.display = 'none' ;