Change Height of text box in Dawn theme

[PMPrinted]

Can anyone take a look at this code and tell me how i can change the height of the text box. i am looking for this one to only have enough height for one line of text with a max of 30 characters

The current code is;

<label for="Add name for the front of the card here" class="form__label">Add name for the front of the card here</label>
<div class="field">
<textarea id="add name here" class="text-area field__input" placeholder="add name for front of the card here"
name="properties[Add name for front of the card here]"form="product-form-{{ section.id }}"></textarea>
</div>

[ZestardTech]

Hello @PMPrinted 

Please you can try this code.

.single-line-textarea {
    overflow: hidden;
    resize: none;
    height: auto;
}

<textarea 
    id="add-name-here" 
    class="text-area field__input single-line-textarea" 
    placeholder="add name for front of the card here" 
    name="properties[Add name for front of the card here]" 
    form="product-form-{{ section.id }}" 
    maxlength="30" 
    rows="1">
</textarea>

[Moeed]

Hey @PMPrinted 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
textarea#add\ Names\ \&\ date\ here {
    padding-top: 10px !important;
    min-height: 45px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed