*{
font-family: "Ubuntu";
}
body{
margin-left: 20%;
margin-right: 20%;
}
#outer{
width: 100%;
border: 1px solid black;
}
#inner{
margin-left: 10%;
margin-right: 10%;
}
input{
text-align: center;
}
.enter{
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
width: 78%;
}
.btn{
margin-top: 10px;
height: 36px;
margin-bottom: 10px;
width: 20%;
float: right;
}
.exit{
height: 100px;
margin-bottom: 10px;
font-size: 40px;
clear: both;
width: 99.4%;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="072jsbox.css">
<script type="text/javascript">
function takeandhi(){
var input = document.getElementById("tinput");
var output = document.getElementById("toutput");
var inputValue = input.value;
output.value = "Hey, " + inputValue + "!";
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">
<form action="">
<input class="enter" type="text" id="tinput" placeholder="Enter your name:">
<input class="btn" type="button" onclick="takeandhi()" id="sender" value="Submit Name">
<input class="exit" type="text" id="toutput" disabled>
</form>
</div>
</div>
</body>
</html>
