How do I change text direction - html

Question

I am making a word counter but the text is not in the left. How can I make it to the left?
let area = document.getElementById('area');
let char = document.getElementById('char');
let word = document.getElementById('word');
area.addEventListener('input', function() {
// count characters
let content = this.value;
char.textContent = content.length;
// remove empty spaces from start and end
content.trim();
console.log(content);
let wordList = content.split(/\s/);
// Remove spaces from between words
let words = wordList.filter(function(element) {
return element != "";
});
// count words
word.textContent = words.length;
});
* {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
font-size: 25px;
}
.container h3 {
font-size: 20px;
}
.heading {
border: 2px dashed green;
padding: 5px;
font-weight: 700;
text-align: center;
width: 400px;
}
#area {
height: 200px;
width: 400px;
resize: none;
font-size: 15px;
font-weight: 700;
padding: 5px;
margin-top: 15px;
color: green;
outline: none;
border: 2px dashed green;
}
#area:focus {
border: 2px dashed blue;
outline: none;
}
.result {
color: green;
font-size: 20px;
width: 401px;
text-align: center;
font-weight: 200;
padding: 5px;
border: 2px dashed green;
margin-top: 10px;
}
#word,
#char {
font-size: 25px;
text-decoration: none;
}
<div class="container">
<div class="heading">
<h1 style="color:green">Word counter</h1>
<h2>Delete everything first!</h2>
<h3><b>Word and Character count<b></h3>
</div>
<textarea id="area"
placeholder="Enter your Text Here">
</textarea>
<p class="result">
<span id="word">0</span> Words and
<span id="char">0</span> Characters
</p>
I tried changing the center to left but it gave weird results like the boxes being to the left of the page, the text being to the left but not centered. So again, how can I make it so that the text inside the middle box is on the left and not in a weird spot

Answer 1

If you mean in your textarea, it is because you have spaces between your textarea tags
Try this : <textarea id="area" placeholder="Enter your Text Here"></textarea>
That's why your placeholder wouldn't show too.

Answer 2

You can use dir="rtl" on text area
<textarea dir="rtl"></textarea>
<element dir="ltr|rtl|auto">
ltr - Left-to-right text direction
rtl - Right-to-left text