Can the <p> tags be aligned to ensure they are evenly spaced?

Is there a way to transform this https://i.sstatic.net/944F8.png

Into this: https://i.sstatic.net/k4Ch8.png

I want the second column to be uniform across all categories. Here is how my current code appears:

                <div class="prod-card-fields-static col-5">
                    {[if_manufacturer]}
                    <p class="m-0">{[lang_manufacturer]}: <b>{[manufacturer]}</b></p>
                    {[/if_manufacturer]}
                    {[if_custom_field_1]}
                    <p class="m-0">{[custom_field_1_name]}: <b>{[custom_field_1]}</b></p>
                    {[/if_custom_field_1]}
                    {[if_custom_field_2]}
                    <p class="m-0">{[custom_field_2_name]}: <b>{[custom_field_2]}</b></p>
                    {[/if_custom_field_2]}
                    {[if_custom_field_3]}
                    <p class="m-0">{[custom_field_3_name]}: <b>{[custom_field_3]}</b></p>
                    {[/if_custom_field_3]}
                    {[if_category_1]}
                    <p class="m-0">{[category_1_name]}: <b>{[category_1]}</b></p>
                    {[/if_category_1]}
                    {[if_category_2]}
                    <p class="m-0">{[category_2_name]}: <b>{[category_2]}</b></p>
                    {[/if_category_2]}
                    {[if_category_3]}
                    <p class="m-0">{[category_3_name]}: <b>{[category_3]}</b></p>
                    {[/if_category_3]}
                </div>
                
            </div>
htmlcss

Answer №1

A convenient way to style your content is by enclosing your paragraph p tags in a div container with the flexbox feature.

.labelWrapper {
  width: 50%;
  display: flex;
  justify-content: space-between;
  }
<div class="prod-card-fields-static col-5"> 
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
      
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
      
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
                     
</div>

Answer №2

There are multiple options available to tackle this issue.

The traditional approach would be to use HTML tables. This involves creating a table with two columns. While this method may work, it is quite inflexible and can cause challenges when trying to make the table responsive. When using HTML tables, your code will need to follow this format:

<table style="width:100%">
<tr>
<th>Element of 1st column, 1st row</th>
<td>Element of 2nd column, 1st row</td>
</tr>
<tr>
<th>Element of 1st column, 2nd row</th>
<td>Element of 2nd column, 2nd row</td>
</tr>
</table>

If you prefer a CSS-based solution, there are other approaches as well:

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

PHP unable to display HTML form element using its designated ID attribute

I've been experiencing some difficulties with PHP echoing a label element that contains an ID attribute within an HTML form. My intention was to utilize the ID attribute in order to avoid having to modify the JS code to use the name attribute instead. ...

javascriptphphtml

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

javascriptjqueryhtmlcssjquery-ui

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

javascriptjqueryhtmlcss

Creating a dynamic slideshow using Jquery Ajax requests

I am looking for help with creating a slideshow using Ajax calls. I have successfully implemented it by adjusting the margin left, but now I need to approach it differently. I have a PHP array that I fetched from a database and I want to use it to display ...

javascriptphpjqueryhtmlajax

IE compatibility with flexbox and columns

While everything is running smoothly on Chrome and Firefox, it seems that I have encountered a problem with IE (IE11). In my responsive layout, I am aiming for the menu to be horizontal in PC mode and vertical in tablet/mobile mode. It appears to be worki ...

cssflexboxinternet-explorer-11

Utilizing Flexbox for Nested Columns

I am attempting to nest flexbox columns inside a flexbox layout. This is the HTML code I have: <div class="container"> <div class="row flex height"> <div class="col-md-6 red"> </div> <div class="col-md-6 orange"> ...

cssflexbox

Unlock the Potential of Spring REST-JWT-JavaScript for Seamless Transitions

In my Java Spring REST back-end, I am implementing a security feature using Json Web Tokens instead of sessions. For the front-end, I plan to use JavaScript and jQuery for sending requests to the back-end, along with HTML. After a successful login, I stor ...

javascripthtmlspringrestjwt

Is there a way to identify if the parent page has completed loading while within an iframe?

Is there a way to detect properties or events within the iframe that can help determine this? The src of the iframe and the parent page belong to different domains. ...

javascripthtml

Horizontal alignment of Bootstrap columns is not working as expected

While attempting to integrate Bootstrap elements into my portfolio, I encountered issues with aligning columns. Currently, the only columns I have added are in the "welcome-section" (Lines 40-52), but they refuse to align horizontally. I've tried tro ...

htmlcsstwitter-bootstrapbootstrap-4

I am attempting to create a presentation featuring the identical title

How can I enhance this code by turning it into a slideshow with additional images while maintaining the h1 and h2 tags within it? Here's the existing code displaying an image with titles overlayed on top: <header class="header-image"> <d ...

javascriptjqueryhtmlcss

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

I'm looking for a way to use the output of a JavaScript function as the value for an input field in HTML. Currently, I have a JavaScript function that generates a random string: function generateRandomString(length) { let result = ''; ...

javascripthtmlinput

Responsive menu with nested submenu

Hi, I'm currently facing some challenges with my mega menu. My goal is to replicate the style of Newegg's mega menu where a small sub-menu appears upon hovering over a menu item. You can view my Codepen example here: https://codepen.io/iamgonge/p ...

csstwitter-bootstrap-3

Raising double-bracket PHP arrays to SQL level

Take a look at this visual representation of my form structure. <div> <input name="address[1][name]" type="text"> <input name="address[1][street]" type="text"> <input name="address[1][city]" type="text"> <input name="address[1][ ...

phphtmlsqlarraysvariables

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

javascriptjqueryhtmlangularjsdate

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Halting the infinite process of appending in jQuery

I attempted to create a setup where it verifies the existence of another variable, and if not found, adds it. var newItem = "<li>Testing</li>"; var hasNewItem = $(".target-class").has(newItem).length; if(hasNewItem == 0) {$(".target-class").ap ...

javascriptjqueryhtml

Interactive search tool for toggling visibility of elements

Hello everyone, this is my initial post on StackOverflow. Keeping my fingers crossed that it goes smoothly! <input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></scr ...

javascriptjqueryhtmlcss

Tips for avoiding repetitive animations when using jQuery animate toggle

Check out my Pen here. I'm having an issue with a share button that expands on hover. Everything works fine, except if you hover over it multiple times, the animation repeats as many times as you've hovered. Is there a way to prevent this from h ...

javascriptjqueryhtmlcssanimation