JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple id="delete_dropdown" title="delete a page" name="loads" style='height:500px'>
<option value="" selected="selected">DELETE</option>
<option value="DigDil">DigDil</option>
<option value="a2">a2</option>
<option value="bob">bob</option>
<option value="box1">box1</option>
<option value="box12a">box12a</option>
<option value="box12d">box12d</option>
<option value="box17">box17</option>
<option value="box18">box18</option>
<option value="box1z">box1z</option>
<option value="box32">box32</option>
<option value="box34">box34</option>
<option value="box789">box789</option>
<option value="box88">box88</option>
<option value="box92">box92</option>
<option value="box93">box93</option>
<option value="box94">box94</option>
<option value="boxaa">boxaa</option>
<option value="boxbb">boxbb</option>
<option value="boxcc">boxcc</option>
<option value="boxdd">boxdd</option>
<option value="boxee">boxee</option>
<option value="bx12">bx12</option>
<option value="c1">c1</option>
<option value="cateye">cateye</option>
<option value="cdf">cdf</option>
<option value="dfr">dfr</option>
<option value="dg">dg</option>
<option value="dg4">dg4</option>
<option value="dg5">dg5</option>
</select>

JavaScript

$(function () {
    $("#delete_dropdown").css("height", parseInt($("#delete_dropdown option").length) * 18);
});