Achieving alignment of header text and body text on the same line

I am dealing with a formatting issue where the first item in my paragraphs is not lining up properly. Here is an example of the problem:

Header

  waspeen: 3304.07
ananas: 24
appel: 3962.0

Header

  waspeen: 3304.07
ananas: 30
appel: 3962.0

Does anyone know how to align these elements properly so they look like this:

Header                     Header

waspeen: 3304.07           waspeen: 3304.07
ananas: 30                 ananas: 24
appel: 3962.0              appel: 3962.0

This is the CSS code I am using:

#gallery-text-left {
    /* Added */
    width: 50%;
}
#gallery-paragraph-1 {
    margin-right: 50px;
    border-radius: 50px;
    padding-left: 50px;
  display: inline;
    /* Added */
    
}
#gallery-paragraph-2 {
    margin-right: 50px;
    border-radius: 4px;
    padding-left: 50px;
  display: inline;
}

#gallery-text-right {
    /* Added */
    width: 50%;
}

And here is the HTML code:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="{% static 'main/css/custom-style.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'main/css/bootstrap.css' %}" />
    </head>

    <body>

        <div class="container center">
            <div id="gallery-text">

                <div id="gallery-text-left" style="float:left">
                    <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b> Header</b></p>

                    <p id="gallery-paragraph-1" style="font-family:Georgia">

                        {% for key, value in content %}
                        <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                        {% endfor %}
                    </p>
                </div>


                <div id="gallery-text-right" style="float:left">
                    <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
                    <p id="gallery-paragraph-2" style="font-family:Georgia">
                        {% for key, value in content_excel %}
                        <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                        {% endfor %}
                    </p>
                </div>
            </div>
        </div>
    </body>

</html>
htmlcss

Answer №1

If you're searching for flexbox, or you could explore grid as an alternative, the code below should meet your requirements.

#gallery-text-left {
  /* Added */
  width: 50%;
  display: flex;
  flex-direction: column;
}

#gallery-text {
  /* Added */
  width: 100%;
  display: flex;
}

#gallery-paragraph-1 {
  border-radius: 50px;
  display: flex;
  flex-direction: column;
}

#gallery-paragraph-2 {
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

#gallery-text-right {
  /* Added */
  display: flex;
  flex-direction: column;
  width: 50%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="{% static 'main/css/custom-style.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'main/css/bootstrap.css' %}" />
</head>

<body>

  <div class="container center">
    <div id="gallery-text">

      <div id="gallery-text-left">
        <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b> Header</b></p>

        <p id="gallery-paragraph-1" style="font-family:Georgia">

          {% for key, value in content %}
          <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br> {% endfor %}
        </p>
      </div>


      <div id="gallery-text-right" style="float:left">
        <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>Header</b></p>
        <p id="gallery-paragraph-2" style="font-family:Georgia">
          {% for key, value in content_excel %}
          <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br> {% endfor %}
        </p>
      </div>
    </div>
  </div>
</body>

</html>

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

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...

phpjqueryhtmlmysql

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

htmlangulartypescript

What is the best way to eliminate the gap above a block element using CSS?

Currently in the process of designing a website, I am faced with a challenging issue that seems to have me stumped. The structure of my page consists entirely of HTML DIVs, with certain elements nested within their parent DIVs. My main dilemma lies in tryi ...

htmlcss

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

What are the specific pages on a three-page website that require canonical tags?

I seem to be facing an issue with Google Search Console. The error message states: Duplicate without user-selected canonical Currently, my site looks like the following. There are a total of 6 links. https://i.stack.imgur.com/s4uXF.png None of these l ...

htmlcanonical-link

Append the class to the div element

Hey there, I'm dealing with a div tag that looks like this: <div id = "product-tabs" class="gen-tabs gen-tabs--style1"> Now, I have to add 'accor' to the end of the class section, so it would look like this: gen-tabs gen-tabs--style ...

jquerycssclass

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...

javascriptcssvue.jsvue-componentvuejs3

Ways to postpone CSS and Script loading once JavaScript has been executed

My issue with my backbone.js app is that I have noticed some slow loading files (a .css and a .js) that are causing the page to block until they are fully loaded. After rendering the backbone view, I am looking for a way to delay the loading of these file ...

javascriptjqueryhtmlcssbackbone.js

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

javascripthtmlcssangular

Saving an image in Flask and securely storing it in a local directory

I am looking to implement a functionality where I can upload an image and pass it to the Python code in Flask for local storage. While following a tutorial, I encountered an issue with the query as the request always returned 'No file part': if & ...

pythonhtmlflask

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

javascripthtmlcssjsontemplates

Are image collections featuring the <img> tag available?

I am working on a website project and I'm looking for a way to create a gallery with a group of photos. The challenge is that I am using Spring MVC, which means regular js and jquery plugins may not work with my 'img src..' tags. Are there a ...

javascriptjqueryhtmlcss

Guide to building a dynamic Slick slider complete with a sleek progress bar

I'm looking to customize my slider with a timer pagination feature using progress bars instead of dots, similar to how it is on . Currently, I am using slick.js for my slider implementation. What is the best way to replace the default pagination butt ...

javascriptjquerycsssliderslick.js

The background image spanning across the entire screen, not just confined to the center

view image details here Can anyone explain why my background image for the main game is displaying like this? I want to set it for the entire screen as I have different backgrounds planned for the menu of the game and the game itself. Any suggestions to ma ...

javascripthtmlcsswebgame-development

Can the height of one div be determined by the height of another div?

Here's the specific situation I am facing: I want the height of Div2 to adjust based on the content of Div3, and the height of Div3 to adapt based on the content in Div2. The height of Div1 is fixed at 500px. Some of the questions that arise are: I ...

javascripthtmlcsstwitter-bootstrap

Colorful D3.js heatmap display

Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...

javascripthtmld3.js

The background image on Nuxt.js is not adapting to different screen sizes

My journey with developing a Nuxt app hit a snag in the CSS department early on. The issue plaguing me, as is often the case, is responsive background images. Everything looked great during testing on desktop browsers, but when I opened it up on my mobile ...

cssvue.jsbackground-imagenuxt.js

Limiting the resizing boundaries in jquery ui: A step-by-step guide

Currently, I am using jquery ui to adjust the size of a div container. My goal is to restrict the resizing to a specific designated area. containment:"parent" After implementing the code, the drag operation adheres to the specified area boundaries. How ...

htmljquerycss

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

htmlcssmobileresponsive-design

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Is it possible to code a PHP function that can work alongside a textarea to display text in the specified color by using a syntax like [color:red]? This function operates in a similar manner to Facebook's @[profile_id:0] feature. ...

javascriptphpjqueryhtmlajax