My query is quite simple. Even when I set the height to 100px, the cursor still starts in the middle of the input box. I want the entire box to be utilized with the cursor starting at the top left corner for a more intuitive paragraph writing experience.
I am currently creating a form. Upon adding width: ***px; you are able to type to the edge of the extended input box, but this doesn't apply when using height: ***px;.
input {
border: 1px solid black;
border-radius: 5px;
padding: 2px 0 2px 10px;
width: 150px;
height: 20px;
margin: 5px 0 0 0;
}
.form {
margin: 50px 0 100px 0;
}
.form>div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-box {
margin: 0 0 20px 0;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main-kart {
width: 400px;
height: 250px;
float: right;
margin: 5px 5px 5px 5px;
}
.main-engine {
width: 300px;
height: 200px;
float: left;
}
.cat {
width: 250px;
height: 150px;
float: right;
}
.description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.description>input {
width: 500px;
}
.sub-m {
margin: 0 0 5px 0;
}
.desc-box {
height: 100px
}<div class="description">
<label class="sub-m" for="Sub">Subject</label>
<input class="form-box" type="text" id="Sub" maxlength="95" required>
<label for="text-box">Description</label>
<input type="text" id="text-box" class="desc-box" maxlength="200" required>
</div>