JSFiddle - React, Tailwind, and code Playground

by Tylanmon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="LanguageName_French.css">
</head>
<body>
    <div id="songs">

    </div>
    <script src="LanguageName_French.js"></script>
</body>
</html>

CSS

@font-face {
    font-family: Feather;
    src: url(/Font/feather.ttf);
}

.div {
-webkit-user-select: none; 
-moz-user-select: none;
-ms-user-select: none; 
user-select: none; 

Background-color: rgb(255, 221, 221);

font-size: x-large;


}

label {
    color: rgb(0, 0, 0); 
    
    font-family: 'Feather';
}

JavaScript

var Song_Name = document.createTextNode('La Marseillaise')

var div = document.createElement('div')
div.setAttribute('class', 'div')
var checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.name = 'checkNAME'
checkbox.id = 'checkID'

var label = document.createElement('label')
label.id = 'nameID'
label.htmlFor = 'checkID'
label.appendChild(Song_Name)

div.appendChild(label)
div.appendChild(checkbox)

document.getElementById('songs').appendChild(div)
//  
var length = label.offsetWidth  
var length2 = checkbox.offsetWidth
console.log(length);

div.style.width = `${length + (length2 * 2 - 5.9)}px`;
div.style.backgroundColor = 'whitte'
div.style.borderRadius = '4px'
div.style.border = `1px solid black`;