Align Text left of the floating right part of paragraph

Question

I need to give some floated right text same start position. I have multiple p and every p is divided in two span. The initial span are floated left and seconds are floated right.

Some HTML and Image to be more clear about.

.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;
 }




  
     Stato: Pubblicato  ⬤ 11  112
  

  
        
            Nome:
            Lotto Prova
        
        
            Data Pubblicazione:
            10/12/2021
        
        
            Data di Scadenza:
            25/12/2021
        
        
            Accesso:
            Link

What I have:

Bad Align

What I need:

Right align

Thanks to who will answer!

user_5641669 · Answer

Actually, this type of content is a typical example where you can use a table, and its default settings will do exactly what you are asking for. So I modified your code accordingly, using CSS-table display parameters (but you could as well use actual HTML table/tr/td/th tags, then you wouldn't need that CSS and it would semantically be better).

Note: I erased your inline-styles for the spans, and I also erased the md-3 class from the card, since otherwise the content simply wouldn't fit into the card line-per-line, but cause breaks due to the limited width, at least here in the snippet (different on wide 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;
}




  
     Stato: Pubblicato  ⬤ 11  112
  

  
    
      Nome:
      Lotto Prova
    
    
      Data Pubblicazione:
      10/12/2021
    
    
      Data di Scadenza:
      25/12/2021
    
    
      Accesso:
      Link

user_2324154 · Answer

You can accomplish this with flexbox and simplify the HTML in the process.

Remove the inline style from the span elements and setup the CSS to make the flex children take up exactly half the space. This will give you the layout you're looking for.

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

.card-body>p>* {
  flex: 1;
}




  
     Stato: Pubblicato  ⬤ 11  112
  
  
    Nome:Lotto Prova
    Data Pubblicazione:10/12/2021
    Data di Scadenza:25/12/2021
    Accesso:Link

Align Text left of the floating right part of paragraph

2 Answers