<form>

  <fieldset>  

    <label class="active">

      <input type="radio" name="class" value="container--one" class="radio" checked="checked">

      <code>auto</code>

      <small>(default)</small>       

    </label>        

    <label>

      <input type="radio" name="class" value="container--two" class="radio">

      <code>content</code>

    </label>     

    <label>

      <input type="radio" name="class" value="container--three" class="radio">

      <code>0</code>           

    </label>         

    <label>

      <input type="radio" name="class" value="container--four" class="radio">

      <code>20%</code>

    </label>             

  </fieldset>  

</form>

​

<div class="container container--one" id="container">

  <p class="box box--one">

    <strong>Item 1 (styled)</strong>

  </p>

  <p class="box box--two">

    <strong>Item 2</strong>

  </p>

  <p class="box box--three">

    <strong>Item 3</strong>

  </p>  

</div>

.container--one .box--one {

  flex-basis: auto;

}

​

.container--two .box--one {

  flex-basis: content;

}

​

.container--three .box--one {

  flex-basis: 0;

}

​

.container--four .box--one {

  flex-basis: 20%;

}

​

.box--one {

  width: 50%;

}

​

/* ETC (Formatting only): */

​

body {

  margin: 1.5em;

  font-size: 130%;

  font-family: sans-serif;

  background: #F2F0EC;

  color: #2E2C08;

}

​

.container {

  display: flex;  

  border: 10px solid #2E2C08;

  background: white;  

}

​

.box {

  margin: 0.25rem;

  padding: 0.5em;

  text-align: center;

  background: #e5e3de;

}

​

fieldset {

  border: #abab9d 1px solid;

  padding: 0;

  margin-bottom: 2em; 

}

​

label {

  display: inline-block;

  padding: 0.5em;

  cursor: pointer;

}

​

.active {

  background: #abab9d;

}

​

.box--one {

  background: #abab9d;

}

var radios = document.querySelectorAll('.radio');

var container = document.getElementById('container');

radios.forEach(function(i){

    i.addEventListener('click', function(el){

        var clicked = el.currentTarget;

        var active = clicked.parentElement.parentElement.querySelector('.active');

        active && active.classList.remove('active');

        clicked.parentElement.classList.add('active');     

        container.className = 'container '+clicked.value;

    });

});