*In response to the previous question, I believe it is still centered around: How can spans from different parent elements be horizontally aligned in HTML/CSS
It is possible to align the "term" and "desc" spans horizontally without the use of JavaScript by utilizing display: table, table-row, and table-cell CSS properties.
Here's a suggestion:
.list-item dt {
display: table-cell;
vertical-align: middle;
}
.list-item dd {
display: table-cell;
margin-left: 10px; /* Add spacing between term and desc */
vertical-align: middle;
}
.list-item .term {
display: inline-block;
font-weight: bold;
}
.list-item .icon {
display: inline-block;
width: 20px; /* Adjust size as necessary */
height: 20px; /* Adjust size as necessary */
background-color: red; /* For illustration purposes */
margin-right: 5px; /* Add space between icon and term */
}
.list-item div {
display: table-row;
}
We have set the display property of dt and dd elements to table-cell, making them act like cells in a table. Additionally, the display property of the parent div is set to table-row to behave like a row in a table.
By default, table cells vertically align their contents to the middle. The vertical-align property helps align the content of "term" and "desc" spans vertically to the middle of their cells.
Furthermore, the display property of "term" span is changed to inline-block to apply the font-weight property. Similarly, the display property of "icon" span is set to inline-block with specified width and height for spacing. Margin-right property adds some space between "icon" and "term" spans.
You may adjust the sizes of "icon" and other elements according to your design requirements.
I hope this explanation proves helpful!