JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="example-text height-normal" tabindex="100">
    
    <div class="example-text-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum lacus ut lectus mattis, quis lacinia nulla ullamcorper. Aliquam eleifend rutrum metus, vitae volutpat nisi tempor in. Mauris metus urna, suscipit eget nisi vitae, luctus vestibulum urna. Duis mattis nec orci quis efficitur. Vivamus facilisis imperdiet maximus. Nullam vitae magna at tortor sodales faucibus id eget odio. Sed interdum tincidunt blandit. Fusce diam odio, venenatis ac tortor in, efficitur mollis lorem. Integer eget dolor lacus.
            
            Morbi aliquam pharetra tristique. Pellentesque non ex neque. Sed lectus mi, venenatis non sollicitudin id, dignissim at tortor. Nam non eros lorem. Curabitur vel ligula ac orci sodales ullamcorper. Donec semper sagittis ipsum, at egestas orci hendrerit ac. Suspendisse ullamcorper ligula mauris, in bibendum diam elementum nec. Pellentesque convallis ultricies sapien non auctor. Quisque rhoncus quis eros at auctor. Cras pretium mi in rhoncus pellentesque. Duis semper id justo vel dictum.
            
            Quisque commodo rutrum mi, quis viverra eros accumsan vehicula. Mauris non neque aliquam, varius diam quis, dignissim ipsum. Proin pulvinar lectus vel semper dignissim. Suspendisse vehicula lacus urna, a bibendum nulla dignissim ut. Mauris dapibus libero a lacus auctor elementum. Nunc iaculis lobortis sodales. Suspendisse gravida consectetur pulvinar. Vestibulum laoreet bibendum commodo. Morbi tincidunt metus sit amet tortor laoreet pretium. Nullam placerat risus sed aliquet posuere. Donec dictum ultrices tortor, vel suscipit ligula maximus eget. Nunc iaculis dui vitae arcu luctus, a lacinia erat dapibus. Sed pretium ligula nec rutrum vehicula. In dignissim eros eget nunc euismod, sit amet tincidunt nisl porta.
           ...

CSS

body {
    font-family: 'Helvetica Neue', Helvetica, 'NanumBarunGothic', 'NanumGothic', 'Malgun Gothic', sans-serif;
    padding: 100px;
    background: #ccc;
}
.example-text-body p {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
}
.example-text {
    position: relative;
    z-index: 1;
    padding: 50px 60px;
    font-size: 14px;
    border-radius: 6px;
    background: #fff;
}
.example-text.height-normal,
.example-text.height-normal.example-line{
    line-height: 22px;
    font-size: large;
}
.example-line {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 50px;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    box-shadow: 0 0 5px red;
}

JavaScript

var example = Object();
    example.$text = $('.example-text').focus();
    example.$line = $('.example-line');

function moveLine (move) {
    var line = example.$line[0],
        $text = example.$text,
        top = parseFloat(line.style.top).toFixed(1) / 1,
        lineHeight = parseFloat($text.css('line-height')).toFixed(1) / 1;
    
    console.log('top:', top, 'line-height:', lineHeight);
    
    // UP
    if (move == 'up') {
        line.style.top = (top - lineHeight) + 'px';
        return;
    }
    // DOWN
    if (move == 'down') {
        line.style.top = (top + lineHeight) + 'px';
    }
}

example.$text.on('keydown', function (e) {
    switch (e.which) {
        case 38: // KEYUP
            moveLine('up');
            e.preventDefault();
            break;
        case 40: // KEYDOWN
            moveLine('down');
            e.preventDefault();
            break;
    }
});