Tabulate text with JavaScript
I'm just commenting on your HTML/CSS.


I commented out some br tags, because they were not necessary
I splitted the HTML in three parts with div's
Slightly adjusted the CSS rules




&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;Aligner&lt;/title&gt;
        &lt;style&gt;
          textarea {
            width: 100% ;
            height: 200px ;
            font-family: monospace;
          }
          .controls {
            margin-top: 10px;
            margin-bottom: 10px;
          }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;Aligner&lt;/h2&gt;
      &lt;div class="editor"&gt;
        &lt;label&gt;Editor:&lt;/label&gt;&lt;!--&lt;br&gt;--&gt;
        &lt;textarea id="editor"&gt;
  DATA : wa_ekpo TYPE ekpo.
  DATA : wa_eket TYPE eket.
  DATA : wa_decision TYPE zrms_performance_decision.
  DATA : wa_receipt_item TYPE zrmt_rcpt_items.
  DATA : wa_container TYPE zrmt_rcpt_hdrs_c.    
        &lt;/textarea&gt;&lt;!--&lt;br&gt;--&gt;
      &lt;/div&gt;
      &lt;div class="controls"&gt;
        &lt;label class="emo"&gt;Align at&lt;/label&gt;
        &lt;input type="text" id="token" class="emo" value="TYPE"&gt;
        &lt;button type="button" id= "button"&gt;Align&lt;/button&gt;&lt;!--&lt;br&gt;--&gt;
      &lt;/div&gt;
      &lt;div class="output"&gt;
        &lt;label&gt;Output:&lt;/label&gt;&lt;!--&lt;br&gt;--&gt;
        &lt;textarea id="output"&gt;&lt;/textarea&gt;&lt;!--&lt;br&gt;--&gt;
      &lt;/div&gt;
      &lt;script&gt;
        // your script
      &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;