Although I know using tables is not ideal, it seems to be the most practical solution in this case.
I'm attempting to align text and dropdown menus in a form. The challenge arises when the text can vary from one line to two lines, making it difficult to set a consistent height for alignment while keeping them on the same line.
Adding padding to accommodate single-line text throws off the alignment when there's a two-line text. Is there a way to create a relative solution that works for both scenarios?
HTML
<table>
<tbody>
<tr>
<td style="width: 120px;" class="level-heading">
<div style="position: absolute;">Client Name</div>
</td>
<td style="width: 120px">
<div class="level">
<select name="ctl00$MainContent$cmbClientName" id="MainContent_cmbClientName" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>
</select>
</div>
</td>
<td style="width: 120px;" class="level-heading">
<div style="position: absolute;">Business Segment</div>
</td>
<td style="width: 120px">
<div class="level">
<select name="ctl00$MainContent$cmbBusinessSegment" id="MainContent_cmbBusinessSegment" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>
</select>
</div>
</td>
<td style="width: 120px;" class="level-heading">Business Segment Category
</td>
<td style="width: 130px">
<div class="level">
<select name="ctl00$MainContent$cmbBusinessSubGroup" id="MainContent_cmbBusinessSubGroup" class="level-big" style="width:180px;">
<option selected="selected" value="Select One">Select One</option>
</select>
</div>
</td>
</tr>
<tr>
<td style="width: 120px;" class="level-heading">Experience Test From
</td>
<td style="width: 120px">
<div class="level">
<select name="ctl00$MainContent$cmbFrom" id="MainContent_cmbFrom" style="height:16px;width:140px;">
<option selected="selected" value="Select One">Select One</option>
</select>
</div>
</td>
<td style="width: 120px;" class="level-heading">Experience Test To
</td>
<td style="width: 120px" align="justify">
<div class="level">
<select name="ctl00$MainContent$cmbTo" id="MainContent_cmbTo" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>
</select>
</div>
</td>
<td style="width: 120px">
<span id="MainContent_lblPeriodTo"></span>
</td>
<td style="width: 130px"></td>
</tr>
<tr>
<td colspan="6" style="height: 10px"></td>
</tr>
</tbody>
</table>
CSS
This is the CSS related to the aforementioned issue.
.level-heading {
font-size: 12px;
padding-bottom: 12px;
}
.decision-page select {
font-size: 12px;
}
.fullpage-width {
width: 896px;
}