JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="content child">1</div>
     <div class="content child">1</div>
     <div class="content child">1</div>
     <div class="content child">1</div>
     <div class="content child">1</div>
</div>



<div>&nbsp</div>
<div>&nbsp</div>
<div class="addARow">Add enough children to warrant a new row</div>
<div>&nbsp</div>
<div>&nbsp</div>
<div class="addAChild">Add one child</div>

CSS

.parent {
    max-width: 50%;
    max-height: 50px;
    overflow-x: scroll;
    border: 1px solid red;
   
}
.content {
    margin: 5px;
    background: lightgrey;
    display: inline-block;
    width: 50px;
}


.addARow {
    cursor: pointer;
    border: 1px solid black;
    float: left;
}
.addAChild {
    cursor: pointer;
    border: 1px solid black;
    float: left;
}

JavaScript

$('.addARow').on('click', function() {
    for (i=2 ; i<18 ; i++) {
        $('.parent').append('<div class="content child">'+i+'</div>');
    }
});

$('.addAChild').on('click', function() {
    $('.parent').append('<div class="content child">A</div>');
});