<input type="checkbox" id="doublewide">
<label for="doublewide">Double width</label>
<input type="checkbox" id="doublehigh"> 
<label for="doublehigh">Double height</label>
<div id="box"></div>

body {
  font-family: segoe ui, arial, sans-serif;
}
#box {
  background: goldenrod;
  margin: 3em;
  width: 50px;
  height: 50px;
  transition: 400ms;
}
label {
  background: #ccc;
  padding: 5px 10px;
  color: #333;
  transition: 600ms;
}
/* Hide checkboxes */
[type=checkbox] {
  position: absolute;
  left: -50vw;
}
/* Selected */
[type=checkbox]:checked + label {
  background: #369;
  color: #fff;
}
/* More options 
[type=checkbox]:focus + label {
  background: #9cf;
  color: #000;
}
[type=checkbox] + label:hover {
  background: #9cf;
  color: #000;
}
*/

const dw = document.querySelector('#doublewide');
const dh = document.querySelector('#doublehigh');
const change = _ => {
    box.style.width = dw.checked ? '100px' : '50px';
    box.style.height = dh.checked ? '100px' : '50px';
 };
dw.addEventListener('click', change);
dh.addEventListener('click', change);