JSFiddle - React, Tailwind, and code Playground

HTML

<section class="viewport">
    <ul class="item-list">
        <li class="item">A</li><li class="item">B</li><li class="item">C</li><li class="item">D</li><li class="item">E</li><li class="item">F</li><li class="item">G</li>
    </ul>
</section>

CSS

.viewport {
    position: relative;
    background-color: lightgrey;
    overflow: hidden;
    height: 200px;
    width: 100%;
}

.viewport:before {
    content: '';
    position: absolute;
    height: 100%;
    border: 1px solid black;
    left: -webkit-calc(50% - 1px);
}

.item-list {
    list-style-type: none;
    width: 7000px;
    
    -webkit-transform: translateX(-300px);
}

.item {
   display: inline-block;   
   background-color: green;
   margin: 0;
   padding: 0;
   height: 100px;
   width: 50px; 
}

.item:nth-child(2n) {
    background-color: red;
}
}

JavaScript

// give each item a random width
$('.item').each(function(i, item) {
   $(item).width(Math.random() * 200 + 50); 
});

var width = 0,
    targetWidth = $('.viewport').width(),
    offset = $('.item-list').offset().left,
    $item = $('.item-list :first-child');

while ($item && width + offset < targetWidth / 2) {
    width += $item.width();
    $item = $item.next();
}

alert($item.prev().text());