JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap" tabIndex="1"><span class="empty"></span></div>
<div class="wrap" tabIndex="1"><span class="empty"></span></div>
<div class="wrap" tabIndex="1"><span class="empty"></span></div>
<div class="wrap" tabIndex="1"><span class="empty"></span></div>
<div class="wrap" tabIndex="1"><span class="empty"></span></div>
<div class="wrap" tabIndex="1"><span class="empty"></span></div>

<button id="add">Add</button>

CSS

.wrap {
    line-height: 110px;
    width: auto;
    border: 1px dotted red;
    display: inline;
    font-size:97px;
    position:relative;
}
.wrap > *{
    font-size:12px;
    line-height:14px;
}

.page {
    width: 40px;
    height: 55px;
    border: 1px solid blue;
    display:inline-block;
}
.empty {
    display:inline-block;
    width:80px;
}
.page + .empty{
    width:38px;
}
.page +.page + .empty{
    width:0px;
}
#add {
    position: absolute;
    top: 300px;
    left: 0px;
    float: left;
}

JavaScript

var createBackgroundImage = (function() {
    var canvas = document.createElement('canvas');
    canvas.style.visibility = 'hidden';
    document.body.appendChild( canvas );

    return function( width, height, text ) {
        // Copy the image contents to the canvas
        canvas.width = width;
        canvas.height = height;
        
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.rect(0, 0, width, height);
 
        ctx.fillStyle = "#232323";
        ctx.fill();
        ctx.stroke();

        ctx.font = "12px Times";
        ctx.textAlign = "left";
        ctx.fillStyle = "#fffff0";
        ctx.fillText(text, 5, 12);
        var base64 = canvas.toDataURL('image/png');

        return 'url(' + base64 + ') repeat-x 0% 0%';
    };
}());

$(function() {
    $('.wrap').css('background', function( index ) {
        return createBackgroundImage(500, 15, 'Title ' + ((+index)+1));
    });
                   
    var target = $('.wrap .empty')[0];
    
    $('#add').click(function() {
        $('<div>', {
            'class': 'page'
        }).insertBefore(target);
    });
    
    $('.wrap').focusin(function() {
        target = $(this).find('.empty');
        
        $('.wrap').filter( this ).css('border', '1px solid black').end().not( this ).css('border', '1px dotted red');
    });
});