JSFiddle - React, Tailwind, and code Playground

HTML

<div class="universe">
    <div class="planet">
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
    </div>
    <div class="planet">
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person alive"></div>
        <div class="person...

CSS

.universe {
    width: 450px;
}
.planet {
    width: 71px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    display: inline-block;
    border-right: 1px solid black;
    padding-right: 5px;
    margin-right: 5px;
}
.person {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: red;
}
.person.alive {
    background-color: green;
}

JavaScript

window.reset = function() {
	$(".person").addClass("alive");
};

window.randomKill = function() {
	reset();

	var people = $(".person");
    var numToKill = people.length / 2;
    for (var index = 0; index < numToKill; index++) {
    	var person = people.splice(Math.floor(Math.random()*people.length), 1);
        $(person).removeClass("alive");
    }
    
    sortPlanets();
};

window.planetKill = function() {
	reset();
    $(".planet").each(function() {
    	var pop = $(this).find(".person").length;
        var numToKill = Math.floor(pop / 2);
        
        //we're using an odd number of items, so randomly add 1
        numToKill += Math.random() >= 0.5 ? 1 : 0;
        var people = $(this).find(".person");
    	for (var index = 0; index < numToKill; index++) {
    		var person = people.splice(Math.floor(Math.random()*people.length), 1);
        	$(person).removeClass("alive");
    	}
        
    });
    
    sortPlanets();
};

window.sortPlanets = function() {
	$(".planet").each(function() {
    	var planet = $(this);
        var alive = $(this).find(".person.alive");
        alive.removeClass("alive");
        
        var numAlive = alive.length;
        $(this).find(".person").each(function(){
        	if (numAlive > 0) {
            	$(this).addClass("alive");
                numAlive--;
            }
        });
    });
};