This question has been raised on Stack Overflow before. However, the solutions provided do not seem to work for me. I am currently working on an Angular project and I am trying to align the 'Mode of comparison' and the corresponding 'Dropdown' element in the middle with respect to each other. Below is a screenshot showing the widget I am working on, with the specific section marked:
https://i.sstatic.net/TPGtc.png
Here is the HTML code I am using:
Note: Custom Angular components like pt-label, dls-combobox, and dls-option are being used.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
And here is the CSS code:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even when I try setting the alignment using margin or padding, both elements get shifted even if the class names are different. Upon inspecting the element table, I noticed that removing vertical-align: baseline from two places (as shown in the picture below) solves my issue:
https://i.sstatic.net/HH4Hb.png
I would appreciate any insights into what might be wrong with my code. Please provide corrections and guidance.