<!DOCTYPE html>
<html>
<head>
<style>
body {
color: yellow;
background-color: #1E1B1B;
}
.page-root {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
}
.login-box {
border-radius: 20px;
background-color: #D8BFD8;
width: 300px;
height:350px;
}
label[for=fname] {
color: black;
margin-top: 500px;
margin-left: 20px;
}
input[type=text] {
border-radius: 10px;
border: 2px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="page-root">
<div class="login-box">
<form>
<label for="fname">Email</label>
<br>
<input type="text" id="fname" name="fname">
</form>
</div>
</div>
</body>
</html>
I have coded the above structure to create a login box with an email input field. My aim is to position both the label and input bar lower within the div element.