JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
			<div class="label"><b>Name:</b></div>
			<div class="control"><input type="text" id="name" value="foo"/></div>
		</div>
		<div class="row">

			<div class="label"><b>Email:</b></div>
			<div class="control"><input type="text" id="email" value="bar"/></div>
		</div>
		<div class="row">
			<div class="label"><b>Phone:</b></div>
			<div class="control"><input type="text" id="phone" value="1234"/></div>	
		</div>
<div class="row">
			<div class="label"><b>Comments:</b></div>
			<div class="control"><input type="textarea" id="comments" value="feefeefoofaa"/></div>	
		</div>
<div class="row">
    <a id="downloadLink">Download file</a>
</div>
<div class="row">
    <input type="file"/>
    <input type="button" value="Import to fields"/>
</div>

CSS

.row
{
	width:50%;
}
.row .label
{
	width: 50%;
	float: left;
	text-align:right;
    padding-top:5px;
}
.row .control
{
	width: 36%;
	float: right;
}
b{
	font-size: 12px;
    color: #464646;

}
input[type="text"]
{
    border: 1px solid #C4C4C4;
    color: #464646;
    font-size: 12px;
    margin: 1px 3px;
    padding: 3px 5px;
    border-radius:5px;
    width:250px;
}	
input[type="textarea"]
{
    border: 1px solid #C4C4C4;
    color: #464646;
    font-size: 12px;
    margin: 1px 3px;
    padding: 3px 5px;
    border-radius:5px;
    width:250px;
    height:200px;
}

JavaScript

var arrayOfStuff = [];
arrayOfStuff.push(document.getElementById("name").value + "\n");
arrayOfStuff.push(document.getElementById("email").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("phone").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("comments").value);
arrayOfStuff.push("\n");
alert(arrayOfStuff);

var blob = new Blob(arrayOfStuff, {type:'text/plain'});

var link = document.getElementById("downloadLink");
link.download = "details.txt";
link.href = window.URL.createObjectURL(blob);