JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tree"></div>

CSS

#tree{text-align: center;}

JavaScript

var n = 10,          //number of lines to execute
    middle = 2,        //The current middle number
    last = 1,         //last loops middle digit
    old = 0,          //middle digit 2 loops ago
    left = '',      //left half of the string
    right = '';        //Right half of the string

for(i = 0; i < n; i++){
    //Reverse the left half
    right = left.split(" ").reverse().join(' ');

    //Output the entire line
    $('#tree').append(left + last + ' ' + right + '<br>');

    //Update values
    old = last;
    last = middle;
    middle = last + old;
    left += old.toString() + ' ';
}