How to size input after text ammount

How can i make my input box length relative to the ammount of text in it?

<div class="kontakt">
                <h2>Kontakt oss</h2>
                <p>Hei! Jeg heter <input type="text" name="navn" placeholder="navn">, og jeg lurer på følgende:</p>

CSS:

.kontakt {
margin-top: 4%;
font-size: 80%;
text-align: center;
}
.kontakt input{
    border:none;
    border-bottom: 1px solid black;
    background:none;
    color:white;
    opacity: 0.7;
    text-align: center;
    size: relative;
}