JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jspPane" style="padding: 0px; width: 352px;margin: 0;">
        <a class="item pl">
            <span class="ico"></span>
            <span data-bind="text: title" class="txt">Unsaved Media</span>
            <span data-bind="text: qty" class="txt2">16</span>
        </a>
        <a class="item pl">
            <span class="ico"></span>
            <span data-bind="text: title" class="txt">Lovely music</span>
            <span data-bind="text: qty" class="txt2">25</span>
        </a>
    </div>

CSS

.jspPane {
    position: absolute;
    overflow: auto;
}
.item {
    border-top: 1px solid #e0e0e0;
    box-sizing: border-box;
    color: #444;
    display: block;
    font-size: 0.8125em;
    height: 34px;
    line-height: 34px;
}
.item:first-child {
    border-top: 0 none;
}
.item .ico {
    float: left;
    display: block;
    height: 30px;
    margin: 2px 5px 0;
    width: 30px;
}
.txt, .txt2 {
    position: absolute;
    right: 70px;
    font-size: 1em;
    left: 15px;
}
.txt2 {
    font-size: 1em;
    left: auto;
    right: 15px;
}

JavaScript

var pane = document.querySelector('.jspPane');

console.log(pane.offsetHeight)
console.log(pane.scrollHeight)