JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<h3>Example 1</h3>
<div id="container">
    <input type="text" id="field1" value="one"/>
    <input type="text" id="field2" value="two"/>
</div>
<button id="toggle">Click me</button>

<h3>Example 2</h3>
<div>
    <input type="text" id="field3" value="one"/>
    <input type="text" id="field4" value="two"/>
</div>
<button id="toggle2">Click me</button>

CSS

input { margin: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

div {
    width: 400px;
    border: 1px solid green;
}
.container-active { border: 1px solid red; }

/*** Example 1 ***/
#field1 { width: 285px; }

.container-active #field1 {
    width: 90px;
}

#field2 { width: 90px; }

.container-active #field2 {
    width: 285px;
}

/*** Example 2 ***/
#field3 {
    width: 285px;
}
#field3.active {
    border: 1px solid red;
    width: 90px; 
}

#field4 {
    width: 90px;
}
#field3.active + #field4 {
    width: 285px;
}

JavaScript

/// Example 1 ///
$('#toggle').on('click', function() {
    $('#container').toggleClass('container-active');
})

/// Example 2 ///
$('#toggle2').on('click', function() {
    $('#field3').toggleClass('active');
})