Tabulate text with JavaScript Pretty printer in ABAP does not take care of all my aligning need, so I wrote a small JS script that tabulates/aligns with a custom string. It contains HTML, CSS and script in 1 file because this is a small tool.

Link : https://github.com/konijn/aligner

&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 }
          .emo { margin-top: 10px ; margin-bottom: 10px }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;Aligner&lt;/h2&gt;
      &lt;label&gt;Editor:&lt;/label&gt;&lt;br&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;br&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;br&gt;
      &lt;label&gt;Output:&lt;/label&gt;&lt;br&gt;
      &lt;textarea id="output"&gt;&lt;/textarea&gt;&lt;br&gt;
      &lt;script&gt;
        //Do the DOM querying once, the DOM elements are stable
        var editor = document.getElementById( 'editor' ),
            output = document.getElementById( 'output' ),
            token  = document.getElementById( 'token'  ),
            button = document.getElementById( 'button' );

        //What happens when we click that button
        button.addEventListener( 'click' , function( e )
        {
          var lines = editor.value.split('\n'),
              columnSizes = {};
          //Collect for each line the size of each column, keep the largest column size  
          lines.forEach( function( line )
          {
            var columns = line.split( token.value );
            columns.forEach( function( column , index )
            {
              columnSizes[index] = Math.max( column.length , columnSizes[index] || 0 );
            });
          });

          //Build up the new text with aligned columns  
          output.value = lines.map( function( line )
          {
            var columns = line.split( token.value );
            return columns.map( function( column , index )
            {
              return column + spaces( columnSizes[index] - column.length );
            }).join( token.value );
          }).join('\n');

          //Make sure Firefox does not go haywire  
          e.preventDefault();
        }, false);

        //Return a string with count spaces       
        function spaces( count )
        {
          return new Array( count + 1 ).join( " " );
        }
      &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;


Please review for style and maintainability.
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;