JSFiddle - React, Tailwind, and code Playground

HTML

<div class='listcontainer'></div>

CSS

div.listcontainer {
  position: relative;
  top: 120px;
  left: 60px;
  height: 250px;
  overflow: hidden;
  width: 200px;
}

div.list {
  background: grey;
  display: inline-block;
  border-radius: 0px 9px 9px 9px;
  height: 250px;
  overflow-y: scroll;
}

div.menuitem {
  width: 200px;
  position: relative;
  min-height: 28px;
  display: inline-block;
  margin-right: 0px;
  padding: 0px 15px 0px 7px;
  cursor: pointer;
}

.menu {
  display: inline-block;
  width: 100%;
  position: relative;
  top: 4px;
  margin-right: -2px;
}

.menutext {
  color: white;
  font-family: "Trebuchet MS", "Impact", Helvetica, Arial, Verdana, sans-serif;
}

.menu a {
  outline: none;
  text-decoration: none;
  color: white;
}

.menuitem:first-child {
  border-radius: 0px 9px 0px 0px;
  top: -1px;
  padding-bottom: 1px;
}

.menuitem:last-child {
  border-radius: 0px 0px 9px 9px;
  top: 0.1px;
  padding-bottom: 5px;
}

JavaScript

$(document).ready(function() {
  a1 = ['Arts and Humanities', 'Style and Fashion', 'Travel and Living', 'Science and Technology', 'Business and Finance', 'Electronics and Telecommunications', 'Politics and Government', 'Society and Relationships', 'Entertainment', 'Education', 'Space and Astronomy', 'Health and Hygiene', 'Computer and Internet'];

  contdiv = '<div class="list">';

  $.each(a1, function(i, n) {
    contdiv += '<div class="menuitem"><span class="menu"><span class="menutext"><a href = "foo.com" title="foo">' + n + '</a></span></span></div><br />';
  });
  contdiv += '<div class="menuitem"><span class="menu"><span class="menutext"><a href = "foo.com" title="foo">' + a1[10] + '</a></span><span class="arrow"></span></span></div></div>';
  $(contdiv).appendTo('.listcontainer');
  
  var textareaWidth = $(".list").get(0).scrollWidth;
  $(".listcontainer").css({
    width: textareaWidth
  });
});