JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<table class="text-and-button">
    <tbody><tr><td class='text'>
        <input type="text" value='some text' />

        </td><td class='padding'></td><td class='button'>
        <button>
            Hi
        </button>
    </td></tr></tbody>
</table>

<br />

CSS

.text-and-button {
    width: 100%;
}
.text-and-button > tbody > tr > td > * {

}
td.text {

}
input { 
    width: 100%;
    padding: 10px;
}

td.padding {
    width: 22px;
}

td.button {
    width: 0.1px;
}
button {
    
}







table {
    --border: 1px solid red;
}

button {
    background: #999;
    border: none;
    --border: 1px solid green;
}
input {
    border: 4px solid blue;
}

JavaScript

setInterval(toggle, 1000);

var enabled = true;
var flip = false;
function toggle(){
    if (!enabled) return;
    flip = !flip;
    $$('button').set('html', (flip ? "Peanut&nbsp;butter" : "jelly"));
}

document.addEvent('click', function() {
    enabled = !enabled;
});