JSFiddle - React, Tailwind, and code Playground

HTML

<select id="mySelect" multiple="true">
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
</select>

<div>
    <button id="update">Update offset</button>
    <span id="top">0</span>
    ,
    <span id="left">0</span>
</div>

JavaScript

$('#update').click(function() {
    var offset = optionOffset($('option:selected'));
    $('#top').text(offset.top);
    $('#left').text(offset.left);
});

optionOffset = function($option) {
    if ($option.length == 0)
        return {};
    var i = $option.index();
    var h = Number($option.css('font-size').replace(/px/, '')) + 3; // Cannot get the height of the option element :(
    var $select = $option.parent();
    var offset = $select.offset();
    offset.top += i*h - $select.scrollTop();
    return offset;
}