JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="inner">
        <table>
            <thead><tr>
                <th><p>Problem</p></th>
                <th><p>Solution</p></th>
        </tr>               
            </thead>            
            <tbody>              
            </tbody>
        </table>
    </div>
</div>

CSS

p {margin:0 0 1em}
table p {margin :0}
.wrap {
    margin:50px 0 0 2%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px 0 0;
    border:1px solid #000;
width:150px
}
.inner {
    padding:0 ; 
    height:200px;
    overflow:auto;
}

table {

    margin:0 0 0 -1px;
    border-collapse:collapse; width:130px
}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;

}
thead th {
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    padding:0 ;

    color:#000;
}
thead th {border:none;}
thead tr p {
    position:absolute;
    top:0;
}
.last {
    padding-right:15px!important;
}

JavaScript

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});