Any idea how to keep this text static

Hi guys,

Do you have any idea how to keep the text above the textarea static when you resize the textarea. It expands by the size of the parent div. My intention is to keep everything centered.

The link: https://test-c3848.web.app/

The HTML:

<div id=div1>
    <div id=div2>
        <p>Paste link in the textarea.</p>
        <textarea type="text" id="txt"></textarea>
    </div>
</div>

Code (markup):

The CSS:

#div1 {min-height: 10em; position: relative}
#div1 #div2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.div3 {
margin: 1em auto;
text-align: center;
}

Code (markup):

Thanks in advanced,

 

Yeah, don't use absolute positioning for centering like it's still 2009. This is not a "No Flex Zone".

Also remember that quotes around attribute values in the markup aren't optional, classes being unique shouldn't need to be prefixed by their parent element, if it's the only tag of that type inside the content it probably doesn't need an ID or class, etc, etc, etc. Also, paragraph is not a label.

<fieldset class="textareaSet">
	<label>
		Paste link in the textarea.<br>
		<textarea type="text"></textarea>
	</label>
</fieldset>

Code (markup):

.textareaSet {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:10em;
	border:none;
}

Code (markup):

You may also want to look at HTML 5's "pattern" attribute so you can kill off the scripttardery.

... and yes, it will enlarge the parent, that's the POINT of being able to resize a textarea.

 

It works,

Thank you, and also for the tips.

 

Thank you for the explanation. Very useful

 

Oh, actually... I completely forgot. Forget "pattern" and your scripting, particularly since you'd need to re-check it for validity server-side all over again.

Try type="url"

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url

 

Thanks big time.

HTML and CSS is what I'm avoiding all my career. It's haunted me every time );