JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Test</h3>


		<label for="pair">Type your text</label></br>
		<div class="form-section">
			<div class="fleft">
				<input type='text' id='my-text-box' name='my-text-box' value="Name=Value" />
			</div>
			<div class="fright">
				<button id='add' type="button">Add</button>
			</div>
		</div>

</br>
</br>
</br>

<label for="pairs">Name/Value Pair List</label></br>
<div class="form-section">
    <div class="fleft">
       <textarea name='outputtext' id='output'></textarea>
    </div>
    <div class="fright">
        <button type="button">Sort by name</button>
        <button type="button">Sort by value</button>
    </div>
</div>

CSS

#my-text-box {
    font-size: 18px; /* or larger */
    height: 1.5em; /* or larger */
    width: 585px; /* or larger */
}
textarea{
    width:585px;
    height:300px;
}
.form-section{
    overflow:hidden;
    width:700px;
}
.fleft{float:left}
.fright{float:left; padding-left:15px;}
.fright button{display:block; margin-bottom:10px;}

JavaScript

document.getElementById('add').onclick = addtext;

function addtext() {
    var nameValue = document.getElementById('my-text-box').value;
    if (/^([a-zA-Z0-9]+=[a-zA-Z0-9]+)$/.test(nameValue))
        document.getElementById('output').textContent += nameValue + '\n';
    else
        alert('Bad value.');
}