JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
    <div class="left_col">
        <div class="form_wrapper">
            The Form That would create data     
        </div>
        <div class="add_button" id="butt_add_color">Add color</div>
    </div>
    <div class="right_col">
        <div class="results_list">
            old stuff
        </div>
    </div>
</div>

CSS

.section {
    margin: 5px 0;
    border:#999 solid thin;
    overflow:hidden;
}

.left_col {
    padding-left: 10px;
    width: 47%;
    float:left;
}

.form_wrapper {
    padding:5px;
}

.right_col {
    padding: 5px 10px;
    width:47%;
    float:right;
    border-left:#999 solid thin;
}

.results_list {
    height: 150px;
    overflow:scroll;
}

.add_button {
    -moz-border-radius:10px 10px 10px 10px;
    cursor:pointer;
    background-color:#009;
    color:#FFF;
    width:180px;
    margin: 10px auto;
    text-align:center;
    padding:5px;
}

JavaScript

$("#butt_add_color").click(function() {
    var data = "new stuff";
    $(this).closest(".section").find(".results_list").html(data);

});