Do you want to draw this. If so it is working. Just remove the !important, it is actually not important.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width...
Just give a padding to your box and it will adjust the size according to its content -
.box {
width: fit-content;
padding: 0.5rem 1.5rem;
border-style: double;
border: 2px solid green;
border-radius: 20px;
background-color: #B3FFB2;
color: #FF0000;
}
If you will add this two lines it will align the X vertically. Don't know you want to use it or not -
display: inline-flex;
align-items: center;
#btnclearfilter
{
display: inline-flex;
align-items: center;
justify-content: center;
width : 19px;
height...
Your filename is wrong and you put wrong content in your "a.download".
<script>
document.getElementById("mybutton").addEventListener("click", buttonclick);
function buttonclick(data, filename, type) {
var filename = "myfile.txt";
var content =...