<div id="container" class="container">
    <div id="line-numbers" class="container__lines"></div>
    <textarea id="textarea" class="container__textarea">Was, spirit great moved spirit deep itself image, from have behold bearing doesn't wherein she'd very, day.
Second set earth heaven signs abundantly living creepeth good earth for greater yielding which night male.
Bring midst whales blessed, is.
From subdue.
Yielding.
Winged our green living sea air, had great third stars was they're above and.
Morning light make first and kind sixth they're fowl, there.
So meat him behold great spirit deep, make, grass seasons hath, moving face waters forth fourth.</textarea>
</div>

body {
    color: rgb(51 65 85);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 10rem;
}
* {
    box-sizing: border-box;
}

.container {
    display: flex;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    overflow: hidden;
}
.container__textarea {
    border: none;
    outline: none;
    padding: 0.5rem;
    resize: none;
    width: 100%;
}
.container__lines {
    border-right: 1px solid rgb(203 213 225);
    padding: 0.5rem;
    text-align: right;
}

document.addEventListener('DOMContentLoaded', () => {
    const textarea = document.getElementById('textarea');
    const lineNumbersEle = document.getElementById('line-numbers');

    const displayLineNumbers = () => {
        const lines = textarea.value.split('\n');
        lineNumbersEle.innerHTML = Array.from({
            length: lines.length,
        }, (_, i) => `<div>${i + 1}</div>`).join('');
    };

    displayLineNumbers();
});