How can I make two span to start at the same line inside td table

Question

I want the two spans inside the table to be align and to start at the same time Here is image to understand more what i mean

.btContentHolder table td, .btContentHolder table th {
    /* padding: 10px; */
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;
    padding-left: 2.5714em;
    padding-top: 2em;
    padding-right: .2em;
}
.pli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #2b6a83;
    font-size: 1.4285em;
    border: solid 1px #2b6a83;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.pli:hover{
    background-color: #2b6a83;
    color: #fff;
    border: solid 1px #fff;
}
.cli{
    position: absolute;
    left: .3em;
    top: 1.5em;
    z-index: 100;
    content: counter(step-counter);
    background-color: #fff;
    color: #e9736a;
    font-size: 1.4285em;
    border: solid 1px #e9736a;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 1.2em;
    text-align: center;
}
.cli:hover{
    background-color: #e9736a;
    color: #fff;
    border: solid 1px #fff;
}
.protd{
        background-color: #2b6a831c;
}
.contd{
        background-color: #ff000024;
}

In-Home Care



Pros
Cons


1One-on-one care tailored to meet unique preferences and needs.
1When 24/7 care is required, the costs can be very high.


2Remain in the comfort of their own home with a safe, familiar setting.
2Managing caregivers and backup care planning requires continued family involvement.


3The opportunity to choose the person who will be providing care.
3Living in the home can lead to social isolation if there is little presence of family or friends.


4The individual can get service from the same consistent caregiver.
4The home may need to be modified for wheelchair accessibility or safety precautions.


5Home care can cheaper depending on the skill level required and services can be combined to lower costs.
5Fewer social activities may take place as opposed to care homes and facilities.


Assisted Living



Pros
Cons


1More affordable when 24/7 care is required.
1Longer wait times to get admitted into an assisted living facility.


2Allows the family to focus more on their relationship with their loved one.
2Frequent changes to the staff mean one-on-care won’t be as consistent.


3Residents have ample opportunities to socialize with others.
3The quality of care can differ depending on the various care workers.


4Family will not have to manage, schedule or hire care providers.
4Residents may get kicked out of their assisted living home with little to no advanced notice.


5The level of care can easily be increased as necessary.
5Your loved one may simply not enjoy living in a group environment.

user_15019536 · Answer

You can use the following code. I make a horizontal alignment for each td I put vertical-align: top; . You can change it.

.btContentHolder table td,
.btContentHolder table th {
  /* padding: 10px; */
  counter-increment: step-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: .2em;
}

.pli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #2b6a83;
  font-size: 1.2285em;
  border: solid 1px #2b6a83;
  border-radius: 50%;
  text-align: center;
  padding: 3px 7px;
  display: inline-block;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli {
  position: relative;
  margin-right: 10px;
  z-index: 100;
  content: counter(step-counter);
  background-color: #fff;
  color: #e9736a;
  font-size: 1.4285em;
  border: solid 1px #e9736a;
  border-radius: 50%;
  padding: 3px 7px;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
  padding: 10px;
}

.contd {
  background-color: #ff000024;
  padding: 10px;
}

#table1 .col1 {
  float: left;
  width: 8%;
}

#table1 .col2 {
  float: left;
  width: 92%;
}

#table2 .col1 {
  float: left;
  width: 12%;
}

#table2 .col2 {
  float: left;
  width: 88%;
}
td{
  vertical-align: top;
}

In-Home Care

  
    
      Pros
      Cons
    
    
      
        1
        One-on-one care tailored to meet unique preferences and needs.
      
      
        1
        When 24/7 care is required, the costs can be very high.
      
    
    
      
        2
        Remain in the comfort of their own home with a safe, familiar setting.
      
      
        2
        Managing caregivers and backup care planning requires continued family involvement.

      
    
    
      
        3
        The opportunity to choose the person who will be providing care.
      
      
        3
        Living in the home can lead to social isolation if there is little presence of family or friends.
      
    
    
      
        4
        The individual can get service from the same consistent caregiver.
      
      
        4
        The home may need to be modified for wheelchair accessibility or safety precautions.
      
    
    
      
        5
        Home care can cheaper depending on the skill level required and services can be combined to lower costs.
      
      
        5
        Fewer social activities may take place as opposed to care homes and facilities.


  Assisted Living
  
    
      
        Pros
        Cons
      
      
        
          1
          More affordable when 24/7 care is required.
        
        
          1
          Longer wait times to get admitted into an assisted living facility.
        
      
      
        
          2
          Allows the family to focus more on their relationship with their loved one.
        
        
          2
          Frequent changes to the staff mean one-on-care won’t be as consistent.
        
      
      
        
          3
          Residents have ample opportunities to socialize with others.
        
        
          3
          The quality of care can differ depending on the various care workers.
        
      
      
        
          4
          Family will not have to manage, schedule or hire care providers.
        
        
          4
          Residents may get kicked out of their assisted living home with little to no advanced notice.
        
      
      
        
          5
          The level of care can easily be increased as necessary.
        
        
          5
          Your loved one may simply not enjoy living in a group environment.

user_7753089 · Answer

It is not recommended to use styles attributes inside html, main because you have a css file, you put everything there.

I removed these elements from .pli and .cli:

position: absolute;
left: .3em;
top: 1.5em;
z-index: 100;

And I also added to make the buttons seem more like a circle. Here is the result:

.btContentHolder table td,
.btContentHolder table th {
  counter-increment: step-counter;
  margin-bottom: 10px;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: 0.2em;
}

.pli {
  content: counter(step-counter);
  background-color: #fff;
  color: #2b6a83;
  font-size: 1.4285em;
  border: solid 1px #2b6a83;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli {
  content: counter(step-counter);
  background-color: #fff;
  color: #e9736a;
  font-size: 1.4285em;
  border: solid 1px #e9736a;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
}

.contd {
  background-color: #ff000024;
}

In-Home Care

  
    
      Pros
      Cons
    
    
       1  One-on-one care tailored to meet unique preferences and needs.
       1  When 24/7 care is required, the costs can be very high.
    
    
       2  Remain in the comfort of their own home with a safe, familiar setting.
       2  Managing caregivers and backup care planning requires continued family involvement.
    
    
       3  The opportunity to choose the person who will be providing care.
       3  Living in the home can lead to social isolation if there is little presence of family or friends.
    
    
       4  The individual can get service from the same consistent caregiver.
       4  The home may need to be modified for wheelchair accessibility or safety precautions.
    
    
       5  Home care can cheaper depending on the skill level required and services can be combined to lower costs.
       5  Fewer social activities may take place as opposed to care homes and facilities.
    
  



  Assisted Living
  
    
      
        Pros
        Cons
      
      
         1  More affordable when 24/7 care is required.
         1  Longer wait times to get admitted into an assisted living facility.
      
      
         2  Allows the family to focus more on their relationship with their loved one.
         2  Frequent changes to the staff mean one-on-care won’t be as consistent.
      
      
         3  Residents have ample opportunities to socialize with others.
         3  The quality of care can differ depending on the various care workers.
      
      
         4  Family will not have to manage, schedule or hire care providers.
         4  Residents may get kicked out of their assisted living home with little to no advanced notice.
      
      
         5  The level of care can easily be increased as necessary.
         5  Your loved one may simply not enjoy living in a group environment.

EDIT 1:

According to your needs, here is an edit with everything you asked.

To make everything works fine, I had to create a new css class which I named .inlineTable.

.inlineTable {
  display: inline-flex;
}

.btContentHolder table td,
.btContentHolder table th {
  counter-increment: step-counter;
  margin-bottom: 10px;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: 0.2em;
}

.pli,
.cli {
  content: counter(step-counter);
  background-color: #fff;
  font-size: 1.4285em;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.pli {
  color: #2b6a83;
  border: solid 1px #2b6a83;
}

.cli {
  color: #e9736a;
  border: solid 1px #e9736a;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
}

.contd {
  background-color: #ff000024;
}


  
    In-Home Care
    
      
        
          Pros
          Cons
        
        
           1  One-on-one care tailored to meet unique preferences and needs.
           1  When 24/7 care is required, the costs can be very high.
        
        
           2  Remain in the comfort of their own home with a safe, familiar setting.
           2  Managing caregivers and backup care planning requires continued family involvement.
        
        
           3  The opportunity to choose the person who will be providing care.
           3  Living in the home can lead to social isolation if there is little presence of family or friends.
        
        
           4  The individual can get service from the same consistent caregiver.
           4  The home may need to be modified for wheelchair accessibility or safety precautions.
        
        
           5  Home care can cheaper depending on the skill level required and services can be combined to lower costs.
           5  Fewer social activities may take place as opposed to care homes and facilities.
        
      
    
  
  
    Assisted Living
    
      
        
          Pros
          Cons
        
        
           1  More affordable when 24/7 care is required.
           1  Longer wait times to get admitted into an assisted living facility.
        
        
           2  Allows the family to focus more on their relationship with their loved one.
           2  Frequent changes to the staff mean one-on-care won’t be as consistent.
        
        
           3  Residents have ample opportunities to socialize with others.
           3  The quality of care can differ depending on the various care workers.
        
        
           4  Family will not have to manage, schedule or hire care providers.
           4  Residents may get kicked out of their assisted living home with little to no advanced notice.
        
        
           5  The level of care can easily be increased as necessary.
           5  Your loved one may simply not enjoy living in a group environment.

EDIT 2:

Now I am sure it is done:

.btContentHolder table td,
.btContentHolder table th {
  counter-increment: step-counter;
  margin-bottom: 10px;
  padding-left: 2.5714em;
  padding-top: 2em;
  padding-right: 0.2em;
  vertical-align: top;
}

.pli,
.cli {
  content: counter(step-counter);
  background-color: #fff;
  font-size: 1.4285em;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 1.2em;
  text-align: center;
}

.pli {
  color: #2b6a83;
  border: solid 1px #2b6a83;
}

.cli {
  color: #e9736a;
  border: solid 1px #e9736a;
}

.pli:hover {
  background-color: #2b6a83;
  color: #fff;
  border: solid 1px #fff;
}

.cli:hover {
  background-color: #e9736a;
  color: #fff;
  border: solid 1px #fff;
}

.protd {
  background-color: #2b6a831c;
}

.contd {
  background-color: #ff000024;
}


  
    
      
        
          In-Home Care
        
        
          Assisted Living
        
      
      
        Pros
        Cons
        Pros
        Cons
      
    
    
      
         
            1 
          One-on-one care tailored to meet unique preferences and needs.
         
            1 
          When 24/7 care is required,
            the costs can be very high.
         
            1 
          More affordable when 24/7 care is required.
         
            1 
          Longer wait times to get admitted into an assisted living facility.
      
      
         
            2 
          Remain in the comfort of their own home with a safe, familiar setting.
         
            2 
          Managing caregivers and backup care planning requires continued family involvement.
         
            2 
          Allows the family to focus more on their relationship with their loved one.
         
            2 
          Frequent changes to the staff mean one-on-care won’t be as consistent.
      
      
         
            3 
          The opportunity to choose the person who will be providing care.
         
            3 
          Living in the home can lead to social isolation if there is little presence of family or friends.
         
            3 
          Residents have ample opportunities to socialize with others.
         
            3 
          The quality of care can differ depending on the various care workers.
      
      
         
            4 
          The individual can get service from the same consistent caregiver.
         
            4 
          The home may need to be modified for wheelchair accessibility or safety precautions.
         
            4 
          Family will not have to manage,
            schedule or hire care providers.
         
            4 
          Residents may get kicked out of their assisted living home with little to no advanced notice.

      
      
         
            5 
          Home care can cheaper depending on the skill level required and services can be combined to lower costs.
         
            5 
          Fewer social activities may take place as opposed to care homes and facilities.
         
            5 
          The level of care can easily be increased as necessary.
         
            5 
          Your loved one may simply not enjoy living in a group environment.

I turned everything into a table and use colspan.

I recommend you to take a look at table docs on W3Schools.

In my opinion you can simplify even more your code creating more classes and removing these styles from you HTML.

How can I make two span to start at the same line inside td table

2 Answers