JSFiddle - React, Tailwind, and code Playground

HTML

<div>The text within this div is
    <div class="inline">aligned</div>to the baseline of the surronding text.</div>
<hr>
<div>The text within this div is
    <div class="inline cropped">not aligned</div>to the baseline of the surronding text.</div>
  <hr>  
<div>The text within this div is
    <select name="cars" class="inline cropped">
<option value="volvo">Volvo, But this option too long</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>to the baseline of the surronding text.</div>

CSS

.inline {
    border: 1px solid #000;
    display: inline;
    padding: 8px;
    width: 80px;
}
.cropped {
    overflow: hidden;
}
select {
    font-family: serif;
    font-size: 16px;
}