JSFiddle - React, Tailwind, and code Playground

by fufflevalve

HTML

<form>
<label>Select Quote:</label>
<select id="quoteselect" class="top" name="quoteselect" onchange="populateDD2()"></select>

<label>Quote:</label>
<select id="quote" class="two-selects" name="quote"></select>

<label>Customer:</label>
<select id="customer" class="two-selects" name="customer"></select>

<label>Pricelist 1:</label>
<select id="pricelist1" class="three-selects" name="pricelist1"></select>

<label>Pricelist 2:</label>
<select id="pricelist2" class="three-selects" name="pricelist2"></select>

<label>Pricelist 3:</label>
<select id="pricelist3" class="three-selects" name="pricelist3"></select>

<label>Month:</label>
<select id="month" name="month"></select>
</form>

CSS

form:after {
    content:" ";
    display:table;
}
label {
    display:inline-block;
    float:left;
    min-width:15%;
    text-align:right;
}
select{
    display:block;
    width:100px;
    margin-bottom:1em;
}
.top {
    width:85%;
}
.two-selects {
    width:35%;
    float:left;
}
.three-selects {
    width:18.333%;
    float:left;
}