Achieving horizontal alignment of spans from different parent elements in HTML and CSS

Is there a way to horizontally align the "term" and "desc" spans without requiring JavaScript? I have attempted to use CSS grid and flexbox but haven't found a solution yet.

<dl>
  <div class="list-item">
    <dt><span class="icon"></span><span class="term">A term</span></dt>
    <dd><span class="desc">A description</span></dd>
  </div>
</dl>

Answer №1

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to align the textarea to the right side of its sibling row using justify-content: space-between?

My rows consist of two sides: the right side with text and the left side with buttons, separated by justify-content: space-between; However, for the last row, I want to add a textarea that starts from the right-most side of the buttons. Is there a way to ...

Is it feasible to indent lines in a template without affecting the content alignment?

Creating a string with newlines that will be included in an email later. if (action) { description = ` Git pull request action: ${action} Git pull request for repo: ${req.body.repository.full_name} Git pull request for repo URL: ${re ...

jQuery UI - Add character right before the final element

My slider is set to range from 10 to 1000 with increments of 20 (10-30-50, etc). I'm looking to add a character before the value on the last step (1000). Currently, it shows values like "560 kr/h" or "400 kr/h", but I want it to display ">1000 kr ...

javascript image alert

I want to upgrade a basic javascript alert to make it look more visually appealing. Currently, the alert is generated using if(isset($_GET['return'])) { // get a random item $sql = "SELECT * FROM pp_undergroundItems AS u LEFT JO ...

Using JavaScript, transform an integer value into a time format

I successfully converted a feed's published date "pubDate" to an integer using JavaScript. Below is the code snippet I implemented for this task. function timetoint(date){ var date = new Date(date); return Math.round(date.getTime()/1000); } ...

Decrease the space between slide items by reducing margins or increasing their width

I'm having trouble achieving the desired spacing between items, I would like more space between each item but they are currently too close together. I am looking for a margin of 10px or a width of 32% for each item. I have already looked into some re ...

Strategies for organizing libraries within mongoDB's system.js

Exploring techniques for storing prototype-based libraries or frameworks in mongoDB's system.js can be challenging. An issue arose when attempting to incorporate dateJS formats in a map-reduce function. JIRA #SERVER-770 clarifies that object closures, ...

Turning a text into a JSON data structure

How can I make JavaScript recognize a string as JSON? I have a function that only works when passed a JSON object. If I pass a string with the same format as JSON, it doesn't work. I want to find a way for the function to treat the string as JSON, ev ...

Issues with HTML5 links not functioning as intended

I am currently working with HTML5 and have been following a tutorial which can be found here- https://www.youtube.com/watch?v=kDyJN7qQETA Below is the code snippet I have been working on- <!DOCTYPE html> <html lang="en"> <head> <met ...

Automatically navigate to the bottom of the page by applying the overflow auto feature

I've been working on a chat application using Vue.js. I have set the overflow property to auto for my div element. My goal is to automatically scroll to the bottom of the div so that users won't have to manually click the scrollbar to view the la ...

The system is facing difficulty in accessing the property 'user_first_name' as it is currently undefined

I'm having trouble registering a user with expressjs/mongoose as I keep receiving the error: TypeError: Cannot read property 'user_first_name' of undefined at C:\Quiz webPolitica\server.js:20:24 at Layer.handle [as handle_request] ...

Transferring inline Javascript code from a component to a separate Javascript file for efficient bundling using Stencil CLI

Looking for guidance on relocating inline javascript from the html component to a standalone js file for better bundling and minification. In the process of customizing BigCommerce with the latest Cornerstone theme. The specific component in question is ...

Choose dropdown menus that are pre-filled by JSON may require a manual refresh to show the content

Occasionally, I encounter an issue with a JSON file used to populate select boxes, where the items in the drop down fail to display until the page is refreshed. Despite no errors in the console or log, the loading is seamless on most occasions, leaving me ...

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

information directed towards particular positions on a meter

I am in the process of creating a dashboard skin that receives data from a game via a plugin. I have encountered a problem with the RPM gauge. The issue is that the angle from 0 to 5 on the gauge is smaller than the angle from 5 to 10. I am attempting to s ...

Employ Jade as the template engine for your Angular 2 project

As I transition to developing MEAN apps with Angular2 instead of Angular1.x, I am encountering a challenge involving the use of jade/pug as my template engine in angular2. I came across a tutorial on how to implement this using webpack, but it seems to b ...

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

A guide on creating a horizontal card body layout for small screens using Bootstrap 4

Is there a way to make cards horizontal in small (mobile) screens using Bootstrap 4? For example, displaying the card vertically on desktop/larger screens and horizontally on mobile/smaller screens like the image below: https://i.sstatic.net/4IcF2.png & ...

Focusing on specific parents to target the same children using CSS and jQuery selectors

Is there a more efficient way to target specific children of select parents in CSS without excessive repetition and lengthening the selector? For instance, if I want to style the first-child paragraph within certain divs. The current CSS method: .funny ...

Integrate CSS and Javascript Plugins into your Ruby on Rails application

I am utilizing an HTML, CSS, and JS template to design the interface for my Rails application. Within this template, there are several plug-ins that are required in both CSS and JS formats. I have stored these plug-ins within the "/assets/plugins/" directo ...