JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button">Click here to dynamically add a new row</button>
<div id="mainContainer">
    <div class="rowSample">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div class="withoutPseudoClass"></div>
    </div>
    <div class="rowSample">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div class="withoutPseudoClass"></div>
    </div>
</div>

CSS

#mainContainer{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.rowSample {
    background-color: gray;
    margin: 5px 0;
    text-align: justify;
    height: 50px;
}
.rowSample.after(' ')

.rowSample > div:not(.withoutPseudoClass) {
    display: inline-block;
    background: black;
    border: 1px solid yellow;
    width: 50px;
    height: 50px;
    box-sizing:border-box;
}
.rowSample .withoutPseudoClass{
    width: 100%;
    display: inline-block;
}

JavaScript

$("button").click(function(){
    var row = $("<div />").addClass("rowSample");
    for(var i = 0; i <=3; i++){
        $("<div />").appendTo(row);
    }
    $("<div />").addClass("withoutPseudoClass").appendTo(row);
    row.appendTo("#mainContainer");
});