A great way to align the "term" and "desc" spans horizontally without relying on JavaScript is by utilizing CSS properties such as display: table, table-row, and table-cell.
Consider implementing the following code snippet:
.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 as necessary */
height: 20px; /* Adjust as necessary */
background-color: red; /* For visualization purposes */
margin-right: 5px; /* Add spacing between icon and term */
}
.list-item div {
display: table-row;
}
The dt and dd elements are set to display as table-cells, simulating cells in a table. Similarly, the parent div is configured to display as a table-row, behaving like a row in a table.
Furthermore, the vertical-align property helps center the content of the "term" and "desc" spans vertically within their respective cells.
By defining the display property of the "term" span as inline-block, styling options like font-weight can be applied. The "icon" span is also styled with inline-block, width, and height attributes to occupy space, while margin-right adds separation from the "icon" to "term" spans.
To tailor your design, feel free to adjust the dimensions of elements accordingly.
Hopefully, this guidance proves beneficial for your project!