Expandable Search box Using CSS LESS Processor

Source code expandable search box using LESS CSS Processor.

Here the code:

<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="http://codepen.io/shane935/pen/EGCyn" />
<style class="cp-pen-styles">input {
  padding: 10px 8px;
  width: 100px;
  border-radius: 12px;
  border: 1px solid gray;
  transition: 300ms width;
  outline: 0;
  font-size: 16px;
}
input:hover {
  width: 120px;
}
input:focus {
  width: 300px;
  transition: 600ms width;
}
</style></head><body>
<input type="text"  placeholder="Search"/>
</body></html>

Or view live editor below:

Here the Result :

Question: How can i use these codes to my own localhost or cdn.
You can view the source of js and put into your cdn or hosting then replace the code url source with your hosted .js
Question:
Why you using codepen.io js ?.
Because no Best Template and processor in any code live editor like codepen.io