title: How to change border width when focused
body: <p>I want to change border width when focused.
  My input box has 1px solid border.
  When focused, It changes 2px different color solid border.
  But there is 1px difference, so the div contains this input box changes its width 1px when focus.
  I want to solve this problem.
  I am a beginner in html and css so I am looking for your help.
  Thank you.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contact-input {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
  }
  
  .contact-label {
    padding-bottom: 2rem;
  }
  
  .contact-input input[type="text"] {
    outline: none;
    border: none;
    border-bottom: 1px solid #707070;
    width: 40%;
  }
  
  .contact-input input[type="text"]:focus {
    outline: none;
    border-bottom: 2px solid #3AD6B1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contact-input"&gt;
    &lt;div class="contact-label"&gt;Name&lt;/div&gt;
    &lt;input class="w-50" type="text" placeholder="Your answer"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>