How to change border width when focused

Question

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.

 .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; }

 <div class="contact-input"> <div class="contact-label">Name</div> <input class="w-50" type="text" placeholder="Your answer"> </div>

Answer 1

add 1px of box-shadow

 .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; box-shadow:0 1px 0 #3AD6B1; border-color:#3AD6B1; }

 <div class="contact-input"> <div class="contact-label">Name</div> <input class="w-50" type="text" placeholder="Your answer"> </div>

Answer 2

You can try setting the height of the contacts-input div to accommodate the increased border.

.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;
    height: 7.5rem;
}