JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Select Option Truncation</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    $( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div>
    <select dir="ltr">
        <option>FirstWord SecondWord</option>
        <option>ThirdWord FourthWord</option>
    </select>
</div>
<br>
<div id="accordion">
    <h3><a href="#">Select Test</a></h3>
    <div>
    <select dir="ltr">
        <option>FirstWord SecondWord</option>
        <option>ThirdWord FourthWord</option>
    </select>
    </div>
    <h3><a href="#">Greek Text</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula.
        </p>
    </div>
</div>
</body>
</html>