Cacher is the code snippet organizer for pro developers

<style>
#jQ, #van {
  width:76px;
  height:76px;
  padding:24px;
  border:2px solid;
  border-radius:8px;
  cursor:pointer;
}

#van {
  transition:1s width;
}
</style>

<div id='jQ'>Click Me</div>
<div id='van'>But vanilla tastes better...</div>

<script>
//jQuery
$(document).ready(function() {
  $("#jQ").click(function() {
    $("#jQ").animate({
      width: 200
    }, 1000);
  });
});

//vanilla
document.querySelector("#van").addEventListener("click", function() {
  this.style.width = "200px";
});
</script>