JSFiddle - React, Tailwind, and code Playground

HTML

<button>This does not clipped</button>
<select>
<option>Quite a bit gets clipped</option>
</select>

CSS

* {
  box-sizing: border-box;
}

body {
  display: flex;
  gap: .5em;
  padding: 1em;
}

button,
select {
  appearance: none;
  border: 1px solid;
  padding: .5em 1em;
  line-height: .5; /* Depending on the font, increasing the line-height is not always the way to go. You don't usually want .5, but even at 1, this gets clipped */
}