JSFiddle - React, Tailwind, and code Playground

HTML

<button id="start">Start</button>
<div id="grid">...</div>

CSS

div#grid {
    display: table;
    border-collapse: collapse;
}

div#grid > div {
    display: table-row;
}

div#grid > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 9px;
    border: 1px solid #777;
    color: #fff;
    background-color: #000;
    padding: 2px;
    width: 16px;
    height: 16px;
}

div#grid > div > div.empty {
    background-color: #fff;
}

div#grid > div > div.max {
    color: orange;
    font-weight: bold;
    background-color: #840;
}

JavaScript

var SIZE = 24;
var DENSITY = .75;

function $(id) {
    if (typeof id === 'undefined') return document.createElement("div");
    return window.document.getElementById(id);
}

var grid = [];
var cells = [];

function initGrid() {
    grid = [];
    cells = [];
    var table = $("grid");
    table.innerHTML = "";
    var row, col, i = 0, cell, value, e;
    for (row = 0 ; row < SIZE ; row++) {
        e = $();
        table.appendChild(e);
        for (col = 0 ; col < SIZE ; col++) {
            value = Math.random() < DENSITY ? 1 : 0;
            cell = $();
            cell.className = value ? "pixel" : "empty";
            cell.innerHTML = "&nbsp;";
            cells.push(cell);
            e.appendChild(cell);
            grid.push(value);
            i++;
        }
    }
}


function solve() {
    var row, col;
    var i = 0;
    var n;
    var here,above;
    for (row = 1 ; row < SIZE ; row++) {
        n = grid[0 + SIZE * row];
        for (col = 1 ; col < SIZE ; col++) {
            here = grid[col + SIZE * row];
            if (here > 0) {
                if (n > 0) {
                    above = grid[col + SIZE * (row - 1)];
                    grid[col + SIZE * row] = 1 + Math.min(n, above);
                }
                n++;
            } else {
                n = 0;
            }
        }
    }
}

function displayResult() {
    var max = 0;
    grid.forEach(
        function(v, idx) {
            if (v > 0) {
                cells[idx].textContent = v;
                max = Math.max(max, v);
            }
        }
    );
    grid.forEach(
        function(v, idx) {
            if (v == max) {
                cells[idx].className = "max";
            }
        }
    );
}


$("start").addEventListener(
    "click",
    function() {
        initGrid();
        window.setTimeout(
            function() {
                solve();
                displayResult();
            }
        )
    },
    false
);