JSFiddle - React, Tailwind, and code Playground

by Geoffrey Davenport

HTML

<!-- ****** VERSION 1 ****** --> 
<div class= 'divclass'>
    <label class="labelleft" for='name'>NAME 1 Very Long Multi-Line Label:</label>
    <select id='name' class='selectclass'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select> 

</div>
<!-- ****** VERSION 2 ****** --> 
<span></span>
<div class='divclass2'>
    <label class="labelleft2" for='name2'>NAME 2 Very Long Multi-Line Label:</label>
    <select id='name2' class='selectclass2'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select> 
</div>
<!-- ****** VERSION 3 ****** --> 
<div class= 'divclass3'>
    <label class="labelleft3" for='name'>NAME 3 Very, Very, Very, Very Long Multi-Line Label:</label>
    <select id='name3' class='selectclass3'>
        <option value="Yes">Why</option>
        <option value="No">Me?</option>
    </select> 

</div>

CSS

/* ============= VERSION 1 ==================*/
div.divclass {
    display: table-cell;
    vertical-align: middle;
    height: 150px;
    width: 400px;
    border: 1px solid red;
}
label.labelleft {
    display: inline-block;
    width: 90px;
    background: lightblue;
    text-align: right;
}
select.selectclass {
  width: 100px;
  vertical-align: middle;
  
}
/* ===========================================*/
/* ===========================================*/
/* ===========================================*/
/* ===========================================*/

div.divclass2 {
    display: inline-block;
    height: 150px;
    width: 400px;
    padding-top: 20px;
    border: 1px solid blue;
}
label.labelleft2 {
    display: block;
    float: left;
    padding-top: 20px;
    background: green;
    width: 90px;
    text-align: right;
}
select.selectclass2 {
  width: 100px;
  padding-top: 10px;
}

/* ============= VERSION 2 ==================*/
div.divclass2 {
    display: inline-block;
    height: 150px;
    width: 400px;
    padding-top: 0px;
    border: 1px solid blue;
}
label.labelleft2 {
    display: block;
    float: left;
    padding-top: 20px;
    background: green;
    width: 90px;
    text-align: right;
}
select.selectclass2 {
  width: 100px;
  padding-top: 20px;
}

/* ============= VERSION 3 ==================*/
div.divclass3 {
    display: inline-flex;
    height: 150px;
    width: 400px;
    border: 1px solid blue;
}
label.labelleft3 {
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    background: YELLOW;
    width: 90px;
}
select.selectclass3 {
    width: 100px;
    display: inline-flex;
    align-items: center; 
    height: auto;
}