Position the text to the left of the floating paragraph on the right

I am looking to align some text on the right side of the page with consistent starting positions. Each paragraph has two spans, one floated left and the other floated right.

Here is an example with HTML and an image included for clarity.

.card {
  max-width: 20rem;
  border: 1px solid #004d99;
  border-radius: 20px;
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid #004d99;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.card-header input {
  border: 2px #004d99 solid;
}

.card-header span {
  color: #90ee90;
}

.card-header span i {
  margin-left: 3%;
}

.card-body {
  margin-bottom: 0px;
  margin-top: 0px;
}
.card-body p span:first-child {
   float: left;
 }

.card-body p span:last-child {
    float: right; text-align: left;
 }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535415b405b46">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="card col-md-3 text-dark bg-light m-3">
  <div class="card-header">
    <input class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato <span> ⬤ </span><i class="far fa-file-alt"></i>11 <i class="fas fa-eye"></i> 112
  </div>

  <div class="card-body">
        <p>
            <span >Nome:</span>
            <span >Lotto Prova</span>
        </p>
        <p>
            <span>Data Pubblicazione:</span>
            <span>10/12/2021</span>
        </p>
        <p>
            <span>Data di Scadenza:</span>
            <span>25/12/2021</span>
        </p>
        <p>
            <span>Accesso:</span>
            <span>Link</span>
        </p>
    </div>
</div>

Current Layout:

Desired Layout:

Appreciate any help provided!

htmlcssbootstrap-4text-align

Answer №1

This particular type of content is a prime example where utilizing a table would be appropriate, and its default settings will align perfectly with your requirements. I have made adjustments to your code using CSS-table display parameters, although you could alternatively utilize actual HTML table/tr/td/th tags which would eliminate the need for CSS and enhance semantic structure.

Please note that I removed the inline-styles from the spans and also eliminated the md-3 class from the card. This change was necessary as the original styling caused the content to break due to limited width within the card container, at least in this snippet (the layout may behave differently on wider screens).

.card {
  border: 1px solid #004d99;
  border-radius: 20px;
  width: 300px;
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid #004d99;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.card-header input {
  border: 2px #004d99 solid;
}

.card-header span {
  color: #90ee90;
}

.card-header span i {
  margin-left: 3%;
}

.card-body {
  margin-bottom: 0px;
  margin-top: 0px;
  display: table;
}
.card-body > p {
  display: table-row;
}
.card-body > p > span {
  display: table-cell;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c382239223f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="card text-dark bg-light m-3">
  <div class="card-header">
    <input class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Status: Published <span> ⬤ </span><i class="far fa-file-alt"></i>11 <i class="fas fa-eye"></i> 112
  </div>

  <div class="card-body">
    <p>
      <span>Name:</span>
      <span>Sample Lot</span>
    </p>
    <p>
      <span>Publication Date:</span>
      <span>10/12/2021</span>
    </p>
    <p>
      <span>Expiration Date:</span>
      <span>25/12/2021</span>
    </p>
    <p>
      <span>Access:</span>
      <span>Link</span>
    </p>
  </div>
</div>

Answer №2

To achieve this design using flexbox, you can simplify the HTML structure.

Get rid of the inline styles on the span elements and utilize CSS to evenly distribute the flex children in half the space. This configuration will help you attain the desired layout.

.card-body>p {
  display: flex;
  flex-flow: row nowrap;
}

.card-body>p>* {
  flex: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4a504b504d">[email protected]</a>/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="card col-md-3 text-dark bg-light m-3" style="max-width: 20rem; border: 1px solid #004d99; border-radius: 20px;">
  <div class="card-header" style="background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px;">
    <input style="border: 2px #004d99 solid;" class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Status: Published <span style="color: #90ee90;"> ⬤ </span><i class="far fa-file-alt" style="margin-left: 3%;"></i>11 <i class="fas fa-eye"
      style="margin-left: 3%;"></i> 112
  </div>
  <div class="card-body">
    <p><span>Name:</span><span>Test Lot</span></p>
    <p><span>Publication Date:</span><span>12/10/2021</span></p>
    <p><span>Expiration Date:</span><span>12/25/2021</span></p>
    <p><span>Access:</span><span>Link</span></p>
  </div>
</div>

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

Styling web pages with CSS and utilizing ASP.NET controls

It has come to my attention that when trying to add the 'style' attribute to an asp:TextBox control, or when trying to use a css class to apply a style, it does not seem to work. I find that I have to explicitly set the attribute like this: < ...

asp.netcssbackground

Eliminate empty space in the table cell

I am working with a table that looks like this: <table> ... <td> <div class="btn-group btn-group-sm"> <button class="btn btn-info mini"><span class="glyphicon glyphicon-duplicate"></span></button&g ...

htmlcsstwitter-bootstrap-3css-tables

The height of scrollbars in the HTML section does not extend to full coverage

On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...

htmlcssscrollbar

Generate a new div element by simply tapping on a button

I want to create a new div by clicking on a button that contains a form. Each div (form) should include information about a specific plane. Once I click on the save button, each plane should be saved in the database. I have started creating the form but I ...

javascriptphpjqueryhtml

Using jQuery, generate a div element and display it in full screen mode

Is it possible to dynamically create a full-screen div using jQuery directly from JavaScript without the need to first define it in the HTML and then make it visible with jQuery or CSS? UPDATE After some troubleshooting, I found a solution to my issue: ...

jqueryhtmlcss

``Can you provide step-by-step instructions on how to delete a particular item from

Currently, I am in the process of developing a simple comment list application using JavaScript and local storage. I have completed all the necessary details, but now I need to figure out how to remove a specific item that was created by the application ...

javascripthtmllocal-storage

How can you make a Tempory Drawer wider in Material Components Web?

Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...

javascripthtmlcssmaterial-designfrontend

Mediawiki functionality experiencing issues within iframe display

Currently, I am working with MediaWiki built in PHP. Due to certain reasons, I have to embed this application within an iframe. All functionalities are running smoothly except for the Edit link for pages. The issue arises when I try to access the second li ...

javascriptjqueryhtmliframe

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Inconsistent column alignment in Bootstrap 4

Hello and thank you for taking the time to assist me. I am currently working with Bootstrap 4, but I have noticed that the grid system is quite different from Bootstrap 3. As a result, I am unsure if the layout issues I am experiencing are due to errors i ...

bootstrap-4

The grid-column-end attribute is creating a gap in the layout

For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns. To accomplish this layou ...

htmlcsscss-grid

Having trouble with CSS background-attachment not functioning properly and unable to adjust padding or margins on the background

Currently, I am in the process of learning CSS and HTML5. However, I am experiencing some difficulty when it comes to implementing basic elements. Specifically, I am using Google Chrome and attempting to create a top bar for my webpage. This top bar should ...

csshtml

Choosing HTML Elements for Audio Playback in HTML5: A Guide to Selecting Elements Without Using Div IDs

When creating an HTML5 player, I am transitioning "from using divs with id's" to "simple HTML elements". Former Scenario (functional) <audio src="track1.mp3" id="audio"></audio> <controls> <play id="play" style="display:none ...

javascripthtmlhtml5-audiocode-cleanupgetelementsbyname

Adjusting the position of the floating image on the left side will impact the height of the container

When attempting to execute the code below: ​<div id="container"> //This is a 200x200 image <img src="http://dummyimage.com/200x200/CCC/000" /> </div>​​​​​​​​​​​​​​​​​​​​​​ ...

css

Receive two inputs in each row and adjust the width of the submit button

As I embark on my journey of coding my very first website, everything has been running smoothly until a recent obstacle caught me off guard. My current challenge lies in creating a contact form that seamlessly integrates with the home page. I envision hav ...

htmlcssforms

Guide on incorporating the font-awesome library in your project

Forgive me if this sounds like a silly question, but I am completely new to javascript and its libraries. I stumbled upon a similar issue as described in this thread, where the accepted solution included the following line: <link rel="stylesheet" href ...

htmlcssfont-awesome

ColdFusion encounters an HTML form error, presenting the message: "There is an undefined element in the FORM."

I'm attempting to submit an HTML form that contains checkboxes for each day of the week. Whenever a checkbox is checked, I assign a value of 1 to it. To handle unchecked checkboxes, I set a default value of 0 using a CFPARAM tag in the form action pag ...

htmlformscoldfusioncoldfusion-8

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

Looking to display a different HTML document in a div - any suggestions?

I am in the process of creating a website that will feature four tiles on the front page. Once a tile is clicked, I would like the content to appear in a window that has a slight transparency to allow the main page to show through. So far, I have managed ...

phpjavascriptjqueryhtmlajax

Styling Dropdown Menu Options

Is there a way to format two strings in a select list and display them as shown below? The first string should begin with 'Item1' followed by spaces until 10 spaces are taken up, then add a delimiter '|' and the second string. So all ...

asp.nethtmlselectlist